npm - @dynatrace/strato-components - Versions diffs - 3.13.3 → 3.14.1 - Mend

@dynatrace/strato-components 3.13.3 → 3.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2832) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/calendar/CalendarRoot.tsx"],
-  "sourcesContent": ["import 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 { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport type { ValidateFieldOptions } from '../form/form.types.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\nimport { type ValidationState } from '../validation/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 { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.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 { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { MessageTarget } from '../validation/message-routing.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  HTMLDivElement\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    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\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    _form,\n    _messageTarget,\n    readOnly = false,\n    type = 'single',\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    onValidityChange,\n    onFocus,\n    onBlur,\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 headerRef = useRef<HTMLButtonElement>(null);\n  const ref = useRef<HTMLInputElement>(null);\n  const refTo = useRef<HTMLInputElement>(null);\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\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, state: formFieldMessagesState } =\n    useFormFieldMessagesContext();\n  const customMessagesRef = useRef(\n    formFieldMessagesState?.customMessages ?? [],\n  );\n  customMessagesRef.current = formFieldMessagesState?.customMessages ?? [];\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  const validateField = useCallback(\n    async ({\n      reveal,\n      trigger,\n    }: ValidateFieldOptions): Promise<ValidationState> => {\n      if (reveal) {\n        formMessageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\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      }\n      if (isTimeValue(calendarValue)) {\n        return emitValidationState(\n          getI18nValidationState(intl, ref.current, trigger),\n        );\n      }\n      const fromState = getI18nValidationState(intl, ref.current, trigger);\n      if (fromState.errors.length > 0) {\n        return emitValidationState(fromState);\n      }\n      return emitValidationState(\n        getI18nValidationState(intl, refTo.current, trigger),\n      );\n    },\n    [\n      formMessageDispatch,\n      calendarValue,\n      min,\n      max,\n      error,\n      precision,\n      emitValidationState,\n      intl,\n      ref,\n      refTo,\n    ],\n  );\n\n  const resetValidation = useCallback(() => {\n    formMessageDispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: false },\n    });\n    for (const msg of customMessagesRef.current) {\n      formMessageDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id: msg.id, messageType: 'custom' },\n      });\n    }\n  }, [formMessageDispatch]);\n\n  const formRegistration = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => calendarValue,\n    focus: () => headerRef.current?.focus(),\n    validateField,\n    resetValidation,\n  });\n  formValidityChangeRef.current = formRegistration.onValidityChange;\n\n  useImperativeHandle(forwardedRef, ():\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        focus() {\n          headerRef.current?.focus();\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      focus() {\n        headerRef.current?.focus();\n      },\n    };\n  }, [refValidate, type, emitValidationState, intl]);\n\n  const {\n    ariaProps,\n    onChange: validationOnChange,\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    form: _form,\n  });\n\n  const calenderContextValue = useMemo(\n    () => ({ state, dispatch, readOnly }),\n    [state, dispatch, readOnly],\n  );\n\n  // CalendarRoot may be rendered without a FormField provider (e.g. inside DatePicker's\n  // popover). useContainerFocus calls useFormFieldMessagesContext internally; the\n  // dispatch is safely optional so SETISTOUCHED is a no-op when no context is present.\n  const { containerClassName, ...containerProps } =\n    useContainerFocus<HTMLDivElement>({\n      onFocus,\n      onBlur,\n      disabled,\n    });\n\n  return (\n    <CalendarContext.Provider value={calenderContextValue}>\n      <div\n        className={clsx(\n          containerClassName,\n          styles.calendar({ readOnly }),\n          consumerClassName,\n          {\n            [styles.disabled]: disabledOrAriaDisabled,\n          },\n        )}\n        role=\"group\"\n        data-testid={dataTestId}\n        ref={calendarRef}\n        style={consumerStyle}\n        {...remainingProps}\n        {...containerProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <CalendarHeader\n          ref={headerRef}\n          view={state.currentView}\n          labelId={labelRef.current}\n        />\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            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              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"]
+  "sourcesContent": ["import 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 { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport type { ValidateFieldOptions } from '../form/form.types.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\nimport { type ValidationState } from '../validation/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 { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.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 { getCustomMessageIds } from '../forms-core/state/formfield-messages-selectors.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { MessageTarget } from '../validation/message-routing.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  HTMLDivElement\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    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\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    _form,\n    _messageTarget,\n    readOnly = false,\n    type = 'single',\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    onValidityChange,\n    onFocus,\n    onBlur,\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 headerRef = useRef<HTMLButtonElement>(null);\n  const ref = useRef<HTMLInputElement>(null);\n  const refTo = useRef<HTMLInputElement>(null);\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\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, state: formFieldMessagesState } =\n    useFormFieldMessagesContext();\n  const customMessageIdsRef = useRef<string[]>([]);\n  customMessageIdsRef.current = getCustomMessageIds(formFieldMessagesState);\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      intl,\n      formerError: error,\n      precision,\n      showError: true,\n      checkOrder: false,\n      ref,\n      errorMessages: CALENDAR_ERROR_MESSAGES,\n    });\n  }, [\n    min,\n    max,\n    formMessageDispatch,\n    intl,\n    error,\n    precision,\n    ref,\n    calendarValue,\n  ]);\n\n  const validateField = useCallback(\n    async ({\n      reveal,\n      trigger,\n    }: ValidateFieldOptions): Promise<ValidationState> => {\n      if (reveal) {\n        formMessageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        validate(calendarValue, min, max, {\n          formMessageDispatch,\n          intl,\n          formerError: error,\n          precision,\n          showError: true,\n          checkOrder: false,\n          ref,\n          errorMessages: CALENDAR_ERROR_MESSAGES,\n        });\n      }\n      if (isTimeValue(calendarValue)) {\n        return emitValidationState(\n          getI18nValidationState(intl, ref.current, trigger),\n        );\n      }\n      const fromState = getI18nValidationState(intl, ref.current, trigger);\n      if (fromState.errors.length > 0) {\n        return emitValidationState(fromState);\n      }\n      return emitValidationState(\n        getI18nValidationState(intl, refTo.current, trigger),\n      );\n    },\n    [\n      formMessageDispatch,\n      intl,\n      calendarValue,\n      min,\n      max,\n      error,\n      precision,\n      emitValidationState,\n      ref,\n      refTo,\n    ],\n  );\n\n  const resetValidation = useCallback(() => {\n    formMessageDispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: false },\n    });\n    for (const id of customMessageIdsRef.current) {\n      formMessageDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id },\n      });\n    }\n  }, [formMessageDispatch]);\n\n  const formRegistration = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => calendarValue,\n    focus: () => headerRef.current?.focus(),\n    validateField,\n    resetValidation,\n  });\n  formValidityChangeRef.current = formRegistration.onValidityChange;\n\n  useImperativeHandle(forwardedRef, ():\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        focus() {\n          headerRef.current?.focus();\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      focus() {\n        headerRef.current?.focus();\n      },\n    };\n  }, [refValidate, type, emitValidationState, intl]);\n\n  const {\n    ariaProps,\n    onChange: validationOnChange,\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    form: _form,\n  });\n\n  const calenderContextValue = useMemo(\n    () => ({ state, dispatch, readOnly }),\n    [state, dispatch, readOnly],\n  );\n\n  // CalendarRoot may be rendered without a FormField provider (e.g. inside DatePicker's\n  // popover). useContainerFocus calls useFormFieldMessagesContext internally; the\n  // dispatch is safely optional so SETISTOUCHED is a no-op when no context is present.\n  const { containerClassName, ...containerProps } =\n    useContainerFocus<HTMLDivElement>({\n      onFocus,\n      onBlur,\n      disabled,\n    });\n\n  return (\n    <CalendarContext.Provider value={calenderContextValue}>\n      <div\n        className={clsx(\n          containerClassName,\n          styles.calendar({ readOnly }),\n          consumerClassName,\n          {\n            [styles.disabled]: disabledOrAriaDisabled,\n          },\n        )}\n        role=\"group\"\n        data-testid={dataTestId}\n        ref={calendarRef}\n        style={consumerStyle}\n        {...remainingProps}\n        {...containerProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <CalendarHeader\n          ref={headerRef}\n          view={state.currentView}\n          labelId={labelRef.current}\n        />\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            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              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": "AAqGa,SA8UH,UA9UG,KAgSP,YAhSO;AArGb,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,eAAe;AAExB,SAAS,sBAAsB;AAC/B,YAAY,YAAY;AAKxB,SAAS,+BAA+B;AAIxC,SAAS,mCAAmC;AAG5C,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAA2B,mBAAmB;AAC9C,SAAS,mCAAmC;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AAEtC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB,mBAAmB;AAC7C,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AAGzB,SAAS,2BAA2B;AACpC,SAAS,+BAA+B;AAExC,SAAS,+BAA+B;AAExC,MAAM,iBAAiB;AA+CvB,SAAS,WAAW,MAAwB;AAC1C,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,oBAAC,mBAAgB;AAAA,IAC1B,KAAK;AACH,aAAO,oBAAC,kBAAe;AAAA,IACzB;AACE,aAAO,oBAAC,iBAAc;AAAA,EAC1B;AACF;AAEA,SAAS,kBACP,OACA,cAKA;AACA,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,gBAAgB,iBAAiB,CAACA,WAAUA,OAAM,aAAa;AACrE,QAAM,MAAM,iBAAiB,CAACA,WAAUA,OAAM,GAAG;AACjD,QAAM,MAAM,iBAAiB,CAACA,WAAUA,OAAM,GAAG;AACjD,QAAM,QAAQ,iBAAiB,CAACA,WAAUA,OAAM,aAAa;AAC7D,QAAM,YAAY,iBAAiB,CAACA,WAAUA,OAAM,SAAS;AAG7D,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,YAAY,OAA0B,IAAI;AAChD,QAAM,MAAM,OAAyB,IAAI;AACzC,QAAM,QAAQ,OAAyB,IAAI;AAC3C,QAAM,wBAAwB,OAE5B,MAAS;AACX,QAAM,uBAAuB;AAAA,IAA0B,CAACA,WACtD,sBAAsB,UAAUA,MAAK;AAAA,EACvC;AACA,QAAM,sBAAsB;AAAA,IAC1B;AAAA,IACA,MAAM,uBAAuB,MAAM,IAAI,SAAS,QAAQ;AAAA,EAC1D;AAEA,QAAM,EAAE,UAAU,OAAO,SAAS,IAAI,YAAkB;AAAA,IACtD;AAAA,EACF,CAA2B;AAE3B,wBAAsB;AAAA,IACpB;AAAA,IACA,MAAM,MAAM;AAAA,IACZ;AAAA,EACF,CAAC;AAED,QAAM,EAAE,UAAU,qBAAqB,OAAO,uBAAuB,IACnE,4BAA4B;AAC9B,QAAM,sBAAsB,OAAiB,CAAC,CAAC;AAC/C,sBAAoB,UAAU,oBAAoB,sBAAsB;AAExE,QAAM,cAAc,YAAY,MAAM;AACpC,0BAAsB;AAAA,MACpB,MAAM,wBAAwB;AAAA,MAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,IAC7B,CAAC;AAED,aAAS,eAAe,KAAK,KAAK;AAAA,MAChC;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,WAAW;AAAA,MACX,YAAY;AAAA,MACZ;AAAA,MACA,eAAe;AAAA,IACjB,CAAC;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF,MAAsD;AACpD,UAAI,QAAQ;AACV,8BAAsB;AAAA,UACpB,MAAM,wBAAwB;AAAA,UAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,QAC7B,CAAC;AACD,iBAAS,eAAe,KAAK,KAAK;AAAA,UAChC;AAAA,UACA;AAAA,UACA,aAAa;AAAA,UACb;AAAA,UACA,WAAW;AAAA,UACX,YAAY;AAAA,UACZ;AAAA,UACA,eAAe;AAAA,QACjB,CAAC;AAAA,MACH;AACA,UAAI,YAAY,aAAa,GAAG;AAC9B,eAAO;AAAA,UACL,uBAAuB,MAAM,IAAI,SAAS,OAAO;AAAA,QACnD;AAAA,MACF;AACA,YAAM,YAAY,uBAAuB,MAAM,IAAI,SAAS,OAAO;AACnE,UAAI,UAAU,OAAO,SAAS,GAAG;AAC/B,eAAO,oBAAoB,SAAS;AAAA,MACtC;AACA,aAAO;AAAA,QACL,uBAAuB,MAAM,MAAM,SAAS,OAAO;AAAA,MACrD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAkB,YAAY,MAAM;AACxC,0BAAsB;AAAA,MACpB,MAAM,wBAAwB;AAAA,MAC9B,SAAS,EAAE,WAAW,MAAM;AAAA,IAC9B,CAAC;AACD,eAAWC,OAAM,oBAAoB,SAAS;AAC5C,4BAAsB;AAAA,QACpB,MAAM,wBAAwB;AAAA,QAC9B,SAAS,EAAE,IAAAA,IAAG;AAAA,MAChB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,mBAAmB,CAAC;AAExB,QAAM,mBAAmB,4BAA4B;AAAA,IACnD;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,eAAe;AAAA,IACf;AAAA,IACA,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM,UAAU,SAAS,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,EACF,CAAC;AACD,wBAAsB,UAAU,iBAAiB;AAEjD,sBAAoB,cAAc,MAG6B;AAC7D,QAAI,SAAS,UAAU;AACrB,aAAO;AAAA,QACL,SAAS,YAAY;AAAA,QACrB,UAAU,IAAI;AAAA,QACd,WAAW;AACT,sBAAY;AACZ;AAAA,YACE,uBAAuB,MAAM,IAAI,SAAS,QAAQ;AAAA,UACpD;AAAA,QACF;AAAA;AAAA,QAEA,eAAe,YAAY;AACzB,sBAAY;AACZ,iBAAO;AAAA,YACL,uBAAuB,MAAM,IAAI,SAAS,QAAQ;AAAA,UACpD;AAAA,QACF;AAAA,QACA,QAAQ;AACN,oBAAU,SAAS,MAAM;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,MACL,SAAS,YAAY;AAAA,MACrB,UAAU,EAAE,MAAM,KAAK,SAAS,IAAI,OAAO,QAAQ;AAAA,MACnD,WAAW;AACT,oBAAY;AACZ,cAAM,YAAY,uBAAuB,MAAM,IAAI,SAAS,QAAQ;AACpE,YAAI,UAAU,OAAO,SAAS,GAAG;AAC/B,8BAAoB,SAAS;AAC7B;AAAA,QACF;AACA;AAAA,UACE,uBAAuB,MAAM,MAAM,SAAS,QAAQ;AAAA,QACtD;AAAA,MACF;AAAA;AAAA,MAEA,eAAe,YAAY;AACzB,oBAAY;AACZ,cAAM,YAAY,uBAAuB,MAAM,IAAI,SAAS,QAAQ;AACpE,YAAI,UAAU,OAAO,SAAS,GAAG;AAC/B,iBAAO,oBAAoB,SAAS;AAAA,QACtC;AACA,eAAO;AAAA,UACL,uBAAuB,MAAM,MAAM,SAAS,QAAQ;AAAA,QACtD;AAAA,MACF;AAAA,MACA,QAAQ;AACN,kBAAU,SAAS,MAAM;AAAA,MAC3B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,qBAAqB,IAAI,CAAC;AAEjD,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EACF,IAAI;AAAA,IACF;AAAA,IACA,CAAC;AAAA,IACD;AAAA,MACE,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,gBAAgB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,YAAU,MAAM;AACd,uBAAmB;AAAA,EACrB,GAAG,CAAC,eAAe,kBAAkB,CAAC;AAEtC,QAAM,WAAW,OAAe,uBAAuB,QAAQ,EAAE;AAEjE,QAAM,yBAAyB,YAAY,gBAAgB;AAE3D,QAAM,iBAAiB,CAAC,SAAS,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,MAAM,QAAQ,GAAG,IAAI,GAAG,MAAM;AAAA,IAC9B;AAAA,IACA,MAAM;AAAA,EACR;AAEA,QAAM,uBAAuB;AAAA,IAC3B,OAAO,EAAE,OAAO,UAAU,SAAS;AAAA,IACnC,CAAC,OAAO,UAAU,QAAQ;AAAA,EAC5B;AAKA,QAAM,EAAE,oBAAoB,GAAG,eAAe,IAC5C,kBAAkC;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,SACE,qBAAC,gBAAgB,UAAhB,EAAyB,OAAO,sBAC/B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,OAAO,SAAS,EAAE,SAAS,CAAC;AAAA,UAC5B;AAAA,UACA;AAAA,YACE,CAAC,OAAO,QAAQ,GAAG;AAAA,UACrB;AAAA,QACF;AAAA,QACA,MAAK;AAAA,QACL,eAAa;AAAA,QACb,KAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAM,MAAM;AAAA,cACZ,SAAS,SAAS;AAAA;AAAA,UACpB;AAAA,UACA,oBAAC,SAAI,mBAAiB,SAAS,SAC7B;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAW,OAAO,KAAK;AAAA,gBACrB,YAAY,CAAC,CAAC;AAAA,cAChB,CAAC;AAAA,cAEA,qBAAW,MAAM,WAAW;AAAA;AAAA,UAC/B,GACF;AAAA,UACC,SAAS,WAAW,oBAAC,sBAAmB;AAAA;AAAA;AAAA,IAC3C;AAAA,IACA,oBAAC,kBACE,sBAAY,aAAa,IACxB;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACC,GAAG;AAAA,QACH,GAAG,eAAe;AAAA,QACnB;AAAA,QACA,OAAO,eAAe,gBAAgB;AAAA,QACtC,UAAU;AAAA;AAAA,IACZ,IAEA,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV;AAAA,UACC,GAAG;AAAA,UACH,GAAG,eAAe,OAAO;AAAA,UAC1B;AAAA,UAEA,OACE,gBAAgB,aAAa,KAAK,eAAe,MAAM,QACnD,cAAc,KAAK,QACnB;AAAA,UAEN,UAAU;AAAA;AAAA,MACZ;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG,eAAe,KAAK;AAAA,UACxB,KAAK;AAAA,UACL,OAAO,eAAe,IAAI,SAAS;AAAA,UACnC,IAAI,GAAG,EAAE;AAAA,UACT,MAAK;AAAA;AAAA,MACP;AAAA,OACF,GAEJ;AAAA,KACF;AAEJ;AAEA,kBAAkB,aAAa,IAAI;AAO5B,MAAM,eAAe,WAAW,iBAAiB;",
+  "names": ["state", "id"]
 }

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

@@ -1,7 +1,7 @@
-._1basjc0-3-13-3 {
+._1basjc0-3-14-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1basjc1-3-13-3::after,._1basjc1-3-13-3::before {
+._1basjc1-3-14-1::after,._1basjc1-3-14-1::before {
   content: "";
   position: absolute;
   width: 4px;
@@ -11,11 +11,11 @@
   left: 50%;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._1basjc1-3-13-3::before {
+._1basjc1-3-14-1::before {
   transform: translate(-50%, 50%) scale(2);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1basjc2-3-13-3 {
+._1basjc2-3-14-1 {
   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-13-3::after {
-  background: var(--_1jljrbf1-3-13-3);
+._1basjc2-3-14-1::after {
+  background: var(--_1jljrbf1-3-14-1);
 }
-._1basjc3-3-13-3 {
+._1basjc3-3-14-1 {
   flex-grow: 1;
 }

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

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

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

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

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

@@ -1,24 +1,24 @@
-._1uazq660-3-13-3 {
+._1uazq660-3-14-1 {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   overflow: visible;
-  fill: var(--_1jljrbf1-3-13-3);
+  fill: var(--_1jljrbf1-3-14-1);
 }
-._1uazq661-3-13-3 {
-  fill: var(--_1jljrbf1-3-13-3);
+._1uazq661-3-14-1 {
+  fill: var(--_1jljrbf1-3-14-1);
 }
-._1uazq662-3-13-3 {
+._1uazq662-3-14-1 {
   fill: var(--dt-colors-background-surface-default, #fff);
 }
-._1uazq663-3-13-3 {
-  fill: var(--_1jljrbf0-3-13-3);
+._1uazq663-3-14-1 {
+  fill: var(--_1jljrbf0-3-14-1);
   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-13-3 {
+._1uazq664-3-14-1 {
   opacity: 1;
 }

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

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

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

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

package/esm/forms/calendar/hooks/useCalendarNavigation.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/hooks/useCalendarNavigation.ts"],
-  "sourcesContent": ["import { useCallback, useEffect, type RefObject } from 'react';\n\nimport type { CalendarContextProps } from '../contexts/CalendarContext.js';\nimport {\n  NUMBER_OF_MONTHS_PER_ROW,\n  NUMBER_OF_WEEKDAYS,\n  NUMBER_OF_YEARS,\n  NUMBER_OF_YEARS_PER_ROW,\n} from '../types/calendarConfiguration.js';\nimport type {\n  CalendarViewType,\n  CalendarNavigationPayload,\n} from '../types/shared-types.js';\n\nexport interface UseCalendarNavigationProps\n  extends Pick<CalendarContextProps, 'dispatch'> {\n  calendarRef: RefObject<HTMLElement | null>;\n  view: CalendarViewType;\n}\n\n// Set of keys that should not prevent the default action\nconst allowedKeys = new Set(['Tab', 'Enter', 'NumpadEnter', ' ']);\n\n// Set of keys for navigating the calendar body\n// Pressing one of those keys should move the focus to the calendar body\nconst calendarNavigationKeyCodes = new Set([\n  'ArrowUp',\n  'ArrowRight',\n  'ArrowDown',\n  'ArrowLeft',\n  'PageUp',\n  'PageDown',\n  'Home',\n  'End',\n]);\n\nconst getMultiplier = (view: CalendarViewType) => {\n  switch (view) {\n    case 'day':\n      return NUMBER_OF_WEEKDAYS;\n    case 'month':\n      return NUMBER_OF_MONTHS_PER_ROW;\n    case 'year':\n      return NUMBER_OF_YEARS_PER_ROW;\n  }\n};\n\nconst getPageUpDownMultiplier = (\n  view: CalendarViewType,\n  event: KeyboardEvent,\n  modifier: 1 | -1,\n): CalendarNavigationPayload => {\n  if (view === 'day') {\n    // Go to previous month. If ALT or SHIFT key is pressed go to previous year instead\n    const unit = event.altKey || event.shiftKey ? 'year' : 'month';\n    return { amount: 1 * modifier, unit };\n  }\n\n  if (view === 'month') {\n    return { amount: 1 * modifier, unit: 'year' };\n  }\n  return { amount: NUMBER_OF_YEARS * modifier };\n};\n\nconst getNavigationConfig = (\n  view: CalendarViewType,\n  event: KeyboardEvent,\n): CalendarNavigationPayload | undefined => {\n  const multiplier = getMultiplier(view);\n\n  switch (event.key) {\n    case 'ArrowUp':\n      // Go to previous row\n      return { amount: -1 * multiplier };\n    case 'ArrowDown':\n      // Go to next week\n      return { amount: 1 * multiplier };\n    case 'ArrowLeft':\n      return { amount: -1 };\n    case 'ArrowRight':\n      return { amount: 1 };\n    case 'PageUp':\n      return getPageUpDownMultiplier(view, event, -1);\n    case 'PageDown':\n      return getPageUpDownMultiplier(view, event, 1);\n    // For day view only\n    case 'Home':\n      // Go to the first day of the week.\n      if (view === 'day') {\n        return { amount: 'startOfWeek' };\n      }\n      break;\n    case 'End':\n      // Go to the last day of the week.\n      if (view === 'day') {\n        return { amount: 'endOfWeek' };\n      }\n      break;\n  }\n};\n\n/** Custom hook for adding keyboard support to the calendar. */\nexport function useCalendarNavigation({\n  calendarRef,\n  view,\n  dispatch,\n}: UseCalendarNavigationProps) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (!allowedKeys.has(event.key)) {\n        event.preventDefault();\n      }\n\n      // Dispatch state change to actually focus the active calendar body element\n      if (calendarNavigationKeyCodes.has(event.key)) {\n        dispatch({ type: 'shouldUpdateFocusFromKeydown', payload: true });\n      }\n\n      const payload = getNavigationConfig(view, event);\n\n      if (payload) {\n        dispatch({ type: 'navigateCurrentView', payload });\n      }\n    },\n    [dispatch, view],\n  );\n\n  // Register event listeners to listen for key events\n  useEffect(() => {\n    const calendarRefCurrent = calendarRef.current;\n    calendarRefCurrent?.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      calendarRefCurrent?.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [calendarRef, handleKeyDown]);\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa,iBAAiC;AAGvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAaP,MAAM,cAAc,oBAAI,IAAI,CAAC,OAAO,SAAS,eAAe,GAAG,CAAC;AAIhE,MAAM,6BAA6B,oBAAI,IAAI;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAED,MAAM,gBAAgB,CAAC,SAA2B;AAChD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EACX;AACF;AAEA,MAAM,0BAA0B,CAC9B,MACA,OACA,aAC8B;AAC9B,MAAI,SAAS,OAAO;AAElB,UAAM,OAAO,MAAM,UAAU,MAAM,WAAW,SAAS;AACvD,WAAO,EAAE,QAAQ,IAAI,UAAU,KAAK;AAAA,EACtC;AAEA,MAAI,SAAS,SAAS;AACpB,WAAO,EAAE,QAAQ,IAAI,UAAU,MAAM,OAAO;AAAA,EAC9C;AACA,SAAO,EAAE,QAAQ,kBAAkB,SAAS;AAC9C;AAEA,MAAM,sBAAsB,CAC1B,MACA,UAC0C;AAC1C,QAAM,aAAa,cAAc,IAAI;AAErC,UAAQ,MAAM,KAAK;AAAA,IACjB,KAAK;AAEH,aAAO,EAAE,QAAQ,KAAK,WAAW;AAAA,IACnC,KAAK;AAEH,aAAO,EAAE,QAAQ,IAAI,WAAW;AAAA,IAClC,KAAK;AACH,aAAO,EAAE,QAAQ,GAAG;AAAA,IACtB,KAAK;AACH,aAAO,EAAE,QAAQ,EAAE;AAAA,IACrB,KAAK;AACH,aAAO,wBAAwB,MAAM,OAAO,EAAE;AAAA,IAChD,KAAK;AACH,aAAO,wBAAwB,MAAM,OAAO,CAAC;AAAA;AAAA,IAE/C,KAAK;AAEH,UAAI,SAAS,OAAO;AAClB,eAAO,EAAE,QAAQ,cAAc;AAAA,MACjC;AACA;AAAA,IACF,KAAK;AAEH,UAAI,SAAS,OAAO;AAClB,eAAO,EAAE,QAAQ,YAAY;AAAA,MAC/B;AACA;AAAA,EACJ;AACF;AAGO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAAyB;AACxB,UAAI,CAAC,YAAY,IAAI,MAAM,GAAG,GAAG;AAC/B,cAAM,eAAe;AAAA,MACvB;AAGA,UAAI,2BAA2B,IAAI,MAAM,GAAG,GAAG;AAC7C,iBAAS,EAAE,MAAM,gCAAgC,SAAS,KAAK,CAAC;AAAA,MAClE;AAEA,YAAM,UAAU,oBAAoB,MAAM,KAAK;AAE/C,UAAI,SAAS;AACX,iBAAS,EAAE,MAAM,uBAAuB,QAAQ,CAAC;AAAA,MACnD;AAAA,IACF;AAAA,IACA,CAAC,UAAU,IAAI;AAAA,EACjB;AAGA,YAAU,MAAM;AACd,UAAM,qBAAqB,YAAY;AACvC,wBAAoB,iBAAiB,WAAW,aAAa;AAE7D,WAAO,MAAM;AACX,0BAAoB,oBAAoB,WAAW,aAAa;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,CAAC;AACjC;",
+  "sourcesContent": ["import { useCallback, useEffect, type RefObject } from 'react';\n\nimport type { CalendarContextProps } from '../contexts/CalendarContext.js';\nimport {\n  NUMBER_OF_MONTHS_PER_ROW,\n  NUMBER_OF_WEEKDAYS,\n  NUMBER_OF_YEARS,\n  NUMBER_OF_YEARS_PER_ROW,\n} from '../types/calendarConfiguration.js';\nimport type {\n  CalendarViewType,\n  CalendarNavigationPayload,\n} from '../types/shared-types.js';\n\nexport interface UseCalendarNavigationProps extends Pick<\n  CalendarContextProps,\n  'dispatch'\n> {\n  calendarRef: RefObject<HTMLElement | null>;\n  view: CalendarViewType;\n}\n\n// Set of keys that should not prevent the default action\nconst allowedKeys = new Set(['Tab', 'Enter', 'NumpadEnter', ' ']);\n\n// Set of keys for navigating the calendar body\n// Pressing one of those keys should move the focus to the calendar body\nconst calendarNavigationKeyCodes = new Set([\n  'ArrowUp',\n  'ArrowRight',\n  'ArrowDown',\n  'ArrowLeft',\n  'PageUp',\n  'PageDown',\n  'Home',\n  'End',\n]);\n\nconst getMultiplier = (view: CalendarViewType) => {\n  switch (view) {\n    case 'day':\n      return NUMBER_OF_WEEKDAYS;\n    case 'month':\n      return NUMBER_OF_MONTHS_PER_ROW;\n    case 'year':\n      return NUMBER_OF_YEARS_PER_ROW;\n  }\n};\n\nconst getPageUpDownMultiplier = (\n  view: CalendarViewType,\n  event: KeyboardEvent,\n  modifier: 1 | -1,\n): CalendarNavigationPayload => {\n  if (view === 'day') {\n    // Go to previous month. If ALT or SHIFT key is pressed go to previous year instead\n    const unit = event.altKey || event.shiftKey ? 'year' : 'month';\n    return { amount: 1 * modifier, unit };\n  }\n\n  if (view === 'month') {\n    return { amount: 1 * modifier, unit: 'year' };\n  }\n  return { amount: NUMBER_OF_YEARS * modifier };\n};\n\nconst getNavigationConfig = (\n  view: CalendarViewType,\n  event: KeyboardEvent,\n): CalendarNavigationPayload | undefined => {\n  const multiplier = getMultiplier(view);\n\n  switch (event.key) {\n    case 'ArrowUp':\n      // Go to previous row\n      return { amount: -1 * multiplier };\n    case 'ArrowDown':\n      // Go to next week\n      return { amount: 1 * multiplier };\n    case 'ArrowLeft':\n      return { amount: -1 };\n    case 'ArrowRight':\n      return { amount: 1 };\n    case 'PageUp':\n      return getPageUpDownMultiplier(view, event, -1);\n    case 'PageDown':\n      return getPageUpDownMultiplier(view, event, 1);\n    // For day view only\n    case 'Home':\n      // Go to the first day of the week.\n      if (view === 'day') {\n        return { amount: 'startOfWeek' };\n      }\n      break;\n    case 'End':\n      // Go to the last day of the week.\n      if (view === 'day') {\n        return { amount: 'endOfWeek' };\n      }\n      break;\n  }\n};\n\n/** Custom hook for adding keyboard support to the calendar. */\nexport function useCalendarNavigation({\n  calendarRef,\n  view,\n  dispatch,\n}: UseCalendarNavigationProps) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (!allowedKeys.has(event.key)) {\n        event.preventDefault();\n      }\n\n      // Dispatch state change to actually focus the active calendar body element\n      if (calendarNavigationKeyCodes.has(event.key)) {\n        dispatch({ type: 'shouldUpdateFocusFromKeydown', payload: true });\n      }\n\n      const payload = getNavigationConfig(view, event);\n\n      if (payload) {\n        dispatch({ type: 'navigateCurrentView', payload });\n      }\n    },\n    [dispatch, view],\n  );\n\n  // Register event listeners to listen for key events\n  useEffect(() => {\n    const calendarRefCurrent = calendarRef.current;\n    calendarRefCurrent?.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      calendarRefCurrent?.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [calendarRef, handleKeyDown]);\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa,iBAAiC;AAGvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAeP,MAAM,cAAc,oBAAI,IAAI,CAAC,OAAO,SAAS,eAAe,GAAG,CAAC;AAIhE,MAAM,6BAA6B,oBAAI,IAAI;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAED,MAAM,gBAAgB,CAAC,SAA2B;AAChD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EACX;AACF;AAEA,MAAM,0BAA0B,CAC9B,MACA,OACA,aAC8B;AAC9B,MAAI,SAAS,OAAO;AAElB,UAAM,OAAO,MAAM,UAAU,MAAM,WAAW,SAAS;AACvD,WAAO,EAAE,QAAQ,IAAI,UAAU,KAAK;AAAA,EACtC;AAEA,MAAI,SAAS,SAAS;AACpB,WAAO,EAAE,QAAQ,IAAI,UAAU,MAAM,OAAO;AAAA,EAC9C;AACA,SAAO,EAAE,QAAQ,kBAAkB,SAAS;AAC9C;AAEA,MAAM,sBAAsB,CAC1B,MACA,UAC0C;AAC1C,QAAM,aAAa,cAAc,IAAI;AAErC,UAAQ,MAAM,KAAK;AAAA,IACjB,KAAK;AAEH,aAAO,EAAE,QAAQ,KAAK,WAAW;AAAA,IACnC,KAAK;AAEH,aAAO,EAAE,QAAQ,IAAI,WAAW;AAAA,IAClC,KAAK;AACH,aAAO,EAAE,QAAQ,GAAG;AAAA,IACtB,KAAK;AACH,aAAO,EAAE,QAAQ,EAAE;AAAA,IACrB,KAAK;AACH,aAAO,wBAAwB,MAAM,OAAO,EAAE;AAAA,IAChD,KAAK;AACH,aAAO,wBAAwB,MAAM,OAAO,CAAC;AAAA;AAAA,IAE/C,KAAK;AAEH,UAAI,SAAS,OAAO;AAClB,eAAO,EAAE,QAAQ,cAAc;AAAA,MACjC;AACA;AAAA,IACF,KAAK;AAEH,UAAI,SAAS,OAAO;AAClB,eAAO,EAAE,QAAQ,YAAY;AAAA,MAC/B;AACA;AAAA,EACJ;AACF;AAGO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAAyB;AACxB,UAAI,CAAC,YAAY,IAAI,MAAM,GAAG,GAAG;AAC/B,cAAM,eAAe;AAAA,MACvB;AAGA,UAAI,2BAA2B,IAAI,MAAM,GAAG,GAAG;AAC7C,iBAAS,EAAE,MAAM,gCAAgC,SAAS,KAAK,CAAC;AAAA,MAClE;AAEA,YAAM,UAAU,oBAAoB,MAAM,KAAK;AAE/C,UAAI,SAAS;AACX,iBAAS,EAAE,MAAM,uBAAuB,QAAQ,CAAC;AAAA,MACnD;AAAA,IACF;AAAA,IACA,CAAC,UAAU,IAAI;AAAA,EACjB;AAGA,YAAU,MAAM;AACd,UAAM,qBAAqB,YAAY;AACvC,wBAAoB,iBAAiB,WAAW,aAAa;AAE7D,WAAO,MAAM;AACX,0BAAoB,oBAAoB,WAAW,aAAa;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,CAAC;AACjC;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
-var borderColor = "var(--_1jljrbf1-3-13-3)";
-var rangeColor = "var(--_1jljrbf0-3-13-3)";
+var borderColor = "var(--_1jljrbf1-3-14-1)";
+var rangeColor = "var(--_1jljrbf0-3-14-1)";
 export {
   borderColor,
   rangeColor

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

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

package/esm/forms/checkbox/Checkbox.css CHANGED Viewed

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

package/esm/forms/checkbox/Checkbox.js CHANGED Viewed

@@ -98,7 +98,7 @@ const Checkbox = forwardRef(
     ]);
     const formValidityChangeRef = useRef(void 0);
     const _emitValidationState = useValidationStateEmitter(
-      (state2) => formValidityChangeRef.current?.(state2)
+      controlState ? void 0 : (state2) => formValidityChangeRef.current?.(state2)
     );
     const emitValidationState = useCustomMessageEmitter(
       _emitValidationState,
@@ -113,7 +113,8 @@ const Checkbox = forwardRef(
       { required, value: String(value) },
       ariaLabelingProps,
       void 0,
-      _emitValidationState
+      _emitValidationState,
+      controlState
     );
     useImperativeHandle(combinedRef, () => {
       return {

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

@@ -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';\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 { useMergeRefs } from '../../core/hooks/useMergeRefs.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 { 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 { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.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 { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/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  HTMLDivElement\n> &\n  StylingProps &\n  DataTestId &\n  WithChildren &\n  MaskingProps &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /**\n     * Handler that is called when the element's focus status changes.\n     * @deprecated Use onFocus/onBlur instead.\n     */\n    onFocusChange?: (isFocused: boolean) => void;\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 * Use the `Checkbox` to let users select one or more options from a list, or to confirm a selection that requires a further action such as clicking a submit button.\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      _form,\n      _messageTarget,\n      formValue,\n      onValidityChange,\n      onChange,\n      children,\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\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      onFocus,\n      onBlur,\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 {\n      id,\n      disabled,\n      required,\n      ariaDisabled,\n      readOnly: _readOnly,\n      inputProps,\n      hintProps,\n      hint,\n      showError,\n      messageState: messagesContextState,\n      messageDispatch: messagesContextDispatch,\n    } = useFormControl({\n      propId,\n      propDisabled,\n      propRequired,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n      controlState,\n    });\n\n    // Imperative Handle Construction\n    const intl = useIntl();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const controlRef = useRef<FormControlRef>(null);\n    const combinedRef = useMergeRefs<FormControlRef | null>([\n      forwardedRef,\n      controlRef,\n    ]);\n    const formValidityChangeRef = useRef<\n      ((state: ValidationState) => void) | undefined\n    >(undefined);\n    const _emitValidationState = useValidationStateEmitter((state) =>\n      formValidityChangeRef.current?.(state),\n    );\n    const emitValidationState = useCustomMessageEmitter(\n      _emitValidationState,\n      () => getI18nValidationState(intl, inputRef.current, 'manual'),\n    );\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { required, value: String(value) },\n      ariaLabelingProps,\n      undefined,\n      _emitValidationState,\n    );\n\n    useImperativeHandle(combinedRef, (): 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 formControl = useInternalFormRegistration({\n      id,\n      name,\n      form: _form,\n      messageTarget: _messageTarget,\n      value: state === true,\n      controlRef,\n      onValidityChange,\n    });\n    formValidityChangeRef.current = formControl.onValidityChange;\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n    const readOnly = !!_readOnly;\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    const { containerClassName, ...containerProps } =\n      useContainerFocus<HTMLDivElement>({\n        onFocus,\n        onBlur,\n        disabled,\n        emitValidationState,\n      });\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = state === 'indeterminate';\n      }\n    }, [state]);\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        role=\"group\"\n        flexDirection=\"column\"\n        gap={4}\n        className={clsx(containerClassName, consumerClassName)}\n        style={consumerStyle}\n        {...containerProps}\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-required={required}\n                aria-disabled={ariaDisabled}\n                readOnly={readOnly}\n                name={name}\n                form={_form}\n                value={formValue}\n                disabled={disabled}\n                required={required}\n                checked={state === true}\n                onChange={handleOnChange}\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 { useMergeRefs } from '../../core/hooks/useMergeRefs.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 { 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 { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.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 { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/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  HTMLDivElement\n> &\n  StylingProps &\n  DataTestId &\n  WithChildren &\n  MaskingProps &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /**\n     * Handler that is called when the element's focus status changes.\n     * @deprecated Use onFocus/onBlur instead.\n     */\n    onFocusChange?: (isFocused: boolean) => void;\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 * Use the `Checkbox` to let users select one or more options from a list, or to confirm a selection that requires a further action such as clicking a submit button.\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      _form,\n      _messageTarget,\n      formValue,\n      onValidityChange,\n      onChange,\n      children,\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\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      onFocus,\n      onBlur,\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 {\n      id,\n      disabled,\n      required,\n      ariaDisabled,\n      readOnly: _readOnly,\n      inputProps,\n      hintProps,\n      hint,\n      showError,\n      messageState: messagesContextState,\n      messageDispatch: messagesContextDispatch,\n    } = useFormControl({\n      propId,\n      propDisabled,\n      propRequired,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n      controlState,\n    });\n\n    // Imperative Handle Construction\n    const intl = useIntl();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const controlRef = useRef<FormControlRef>(null);\n    const combinedRef = useMergeRefs<FormControlRef | null>([\n      forwardedRef,\n      controlRef,\n    ]);\n    const formValidityChangeRef = useRef<\n      ((state: ValidationState) => void) | undefined\n    >(undefined);\n    const _emitValidationState = useValidationStateEmitter(\n      controlState\n        ? undefined\n        : (state) => formValidityChangeRef.current?.(state),\n    );\n    const emitValidationState = useCustomMessageEmitter(\n      _emitValidationState,\n      () => getI18nValidationState(intl, inputRef.current, 'manual'),\n    );\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { required, value: String(value) },\n      ariaLabelingProps,\n      undefined,\n      _emitValidationState,\n      controlState,\n    );\n\n    useImperativeHandle(combinedRef, (): 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 formControl = useInternalFormRegistration({\n      id,\n      name,\n      form: _form,\n      messageTarget: _messageTarget,\n      value: state === true,\n      controlRef,\n      onValidityChange,\n    });\n    formValidityChangeRef.current = formControl.onValidityChange;\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n    const readOnly = !!_readOnly;\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    const { containerClassName, ...containerProps } =\n      useContainerFocus<HTMLDivElement>({\n        onFocus,\n        onBlur,\n        disabled,\n        emitValidationState,\n      });\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = state === 'indeterminate';\n      }\n    }, [state]);\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        role=\"group\"\n        flexDirection=\"column\"\n        gap={4}\n        className={clsx(containerClassName, consumerClassName)}\n        style={consumerStyle}\n        {...containerProps}\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-required={required}\n                aria-disabled={ariaDisabled}\n                readOnly={readOnly}\n                name={name}\n                form={_form}\n                value={formValue}\n                disabled={disabled}\n                required={required}\n                checked={state === true}\n                onChange={handleOnChange}\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": ["state"]
 }

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

@@ -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-13-3", variantClassNames: { readOnly: { true: "_qmw7spn-3-13-3" }, hasError: { true: "_qmw7spo-3-13-3" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-13-3"]] });
-var checkboxKnobCSS = _7a468({ defaultClassName: "_qmw7sp4-3-13-3", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-13-3", false: "_qmw7sp6-3-13-3" }, disabled: { true: "_qmw7sp7-3-13-3", false: "_qmw7sp8-3-13-3" }, hasError: { true: "_qmw7sp9-3-13-3", false: "_qmw7spa-3-13-3" }, checked: { true: "_qmw7spb-3-13-3", false: "_qmw7spc-3-13-3", indeterminate: "_qmw7spd-3-13-3", undefined: "_qmw7spe-3-13-3" }, readOnly: { true: "_qmw7spf-3-13-3" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-13-3"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-13-3"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-13-3"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-13-3"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-13-3"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-13-3"]] });
-var checkboxLabelCSS = _7a468({ defaultClassName: "_qmw7sp0-3-13-3", variantClassNames: { disabled: { true: "_qmw7sp1-3-13-3" }, required: { true: "_qmw7sp2-3-13-3" }, readOnly: { true: "_qmw7sp3-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
+var checkboxIconCSS = _7a468({ defaultClassName: "_qmw7spm-3-14-1", variantClassNames: { readOnly: { true: "_qmw7spn-3-14-1" }, hasError: { true: "_qmw7spo-3-14-1" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-14-1"]] });
+var checkboxKnobCSS = _7a468({ defaultClassName: "_qmw7sp4-3-14-1", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-14-1", false: "_qmw7sp6-3-14-1" }, disabled: { true: "_qmw7sp7-3-14-1", false: "_qmw7sp8-3-14-1" }, hasError: { true: "_qmw7sp9-3-14-1", false: "_qmw7spa-3-14-1" }, checked: { true: "_qmw7spb-3-14-1", false: "_qmw7spc-3-14-1", indeterminate: "_qmw7spd-3-14-1", undefined: "_qmw7spe-3-14-1" }, readOnly: { true: "_qmw7spf-3-14-1" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-14-1"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-14-1"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-14-1"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-14-1"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-14-1"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-14-1"]] });
+var checkboxLabelCSS = _7a468({ defaultClassName: "_qmw7sp0-3-14-1", variantClassNames: { disabled: { true: "_qmw7sp1-3-14-1" }, required: { true: "_qmw7sp2-3-14-1" }, readOnly: { true: "_qmw7sp3-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   checkboxIconCSS,
   checkboxKnobCSS,

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

@@ -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-13-3',variantClassNames:{readOnly:{true:'_qmw7spn-3-13-3'},hasError:{true:'_qmw7spo-3-13-3'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:true},'_qmw7spp-3-13-3']]});\nexport var checkboxKnobCSS = _7a468({defaultClassName:'_qmw7sp4-3-13-3',variantClassNames:{hasChildren:{true:'_qmw7sp5-3-13-3',false:'_qmw7sp6-3-13-3'},disabled:{true:'_qmw7sp7-3-13-3',false:'_qmw7sp8-3-13-3'},hasError:{true:'_qmw7sp9-3-13-3',false:'_qmw7spa-3-13-3'},checked:{true:'_qmw7spb-3-13-3',false:'_qmw7spc-3-13-3',indeterminate:'_qmw7spd-3-13-3',undefined:'_qmw7spe-3-13-3'},readOnly:{true:'_qmw7spf-3-13-3'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:false,disabled:false},'_qmw7spg-3-13-3'],[{readOnly:true,hasError:true,disabled:false},'_qmw7sph-3-13-3'],[{disabled:true,hasError:true,checked:false},'_qmw7spi-3-13-3'],[{disabled:true,hasError:false,checked:false},'_qmw7spj-3-13-3'],[{disabled:false,hasError:true,checked:false},'_qmw7spk-3-13-3'],[{disabled:false,hasError:false,checked:false,readOnly:false},'_qmw7spl-3-13-3']]});\nexport var checkboxLabelCSS = _7a468({defaultClassName:'_qmw7sp0-3-13-3',variantClassNames:{disabled:{true:'_qmw7sp1-3-13-3'},required:{true:'_qmw7sp2-3-13-3'},readOnly:{true:'_qmw7sp3-3-13-3'}},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-14-1',variantClassNames:{readOnly:{true:'_qmw7spn-3-14-1'},hasError:{true:'_qmw7spo-3-14-1'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:true},'_qmw7spp-3-14-1']]});\nexport var checkboxKnobCSS = _7a468({defaultClassName:'_qmw7sp4-3-14-1',variantClassNames:{hasChildren:{true:'_qmw7sp5-3-14-1',false:'_qmw7sp6-3-14-1'},disabled:{true:'_qmw7sp7-3-14-1',false:'_qmw7sp8-3-14-1'},hasError:{true:'_qmw7sp9-3-14-1',false:'_qmw7spa-3-14-1'},checked:{true:'_qmw7spb-3-14-1',false:'_qmw7spc-3-14-1',indeterminate:'_qmw7spd-3-14-1',undefined:'_qmw7spe-3-14-1'},readOnly:{true:'_qmw7spf-3-14-1'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:false,disabled:false},'_qmw7spg-3-14-1'],[{readOnly:true,hasError:true,disabled:false},'_qmw7sph-3-14-1'],[{disabled:true,hasError:true,checked:false},'_qmw7spi-3-14-1'],[{disabled:true,hasError:false,checked:false},'_qmw7spj-3-14-1'],[{disabled:false,hasError:true,checked:false},'_qmw7spk-3-14-1'],[{disabled:false,hasError:false,checked:false,readOnly:false},'_qmw7spl-3-14-1']]});\nexport var checkboxLabelCSS = _7a468({defaultClassName:'_qmw7sp0-3-14-1',variantClassNames:{disabled:{true:'_qmw7sp1-3-14-1'},required:{true:'_qmw7sp2-3-14-1'},readOnly:{true:'_qmw7sp3-3-14-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACjP,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,SAAQ,EAAC,MAAK,mBAAkB,OAAM,mBAAkB,eAAc,mBAAkB,WAAU,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,OAAM,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,SAAQ,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,OAAM,SAAQ,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,OAAM,UAAS,MAAK,SAAQ,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,OAAM,UAAS,OAAM,SAAQ,OAAM,UAAS,MAAK,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACz1B,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,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-picker/DateSelector.js CHANGED Viewed

@@ -105,8 +105,8 @@ const DateSelector = forwardRef(
             {
               value: {
                 state: {
-                  customMessages: [],
-                  formControlMessages: [],
+                  errors: [],
+                  hints: [],
                   showError: formFieldState.showError
                 }
               },

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

@@ -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 { 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      overlayOwnerId,\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          disabled={disabled || readOnly}\n          size=\"condensed\"\n          color={error && !readOnly ? 'critical' : 'neutral'}\n          variant=\"emphasized\"\n          data-dt-children-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          overlayContainerProps={{\n            'data-dt-owner': overlayOwnerId,\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,mBAgBM,KAhBN;AA1EN,SAAS,YAAY,qBAAqB,gBAAgB;AAC1D,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,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;AAAA,MACA,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,UAAU,YAAY;AAAA,UACtB,MAAK;AAAA,UACL,OAAO,SAAS,CAAC,WAAW,aAAa;AAAA,UACzC,SAAQ;AAAA,UACR,yBAAsB;AAAA,UAEtB,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,UACD,uBAAuB;AAAA,YACrB,iBAAiB;AAAA,UACnB;AAAA,UAGA;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 { 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      overlayOwnerId,\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          disabled={disabled || readOnly}\n          size=\"condensed\"\n          color={error && !readOnly ? 'critical' : 'neutral'}\n          variant=\"emphasized\"\n          data-dt-children-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          overlayContainerProps={{\n            'data-dt-owner': overlayOwnerId,\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                errors: [],\n                hints: [],\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,mBAgBM,KAhBN;AA1EN,SAAS,YAAY,qBAAqB,gBAAgB;AAC1D,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,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;AAAA,MACA,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,UAAU,YAAY;AAAA,UACtB,MAAK;AAAA,UACL,OAAO,SAAS,CAAC,WAAW,aAAa;AAAA,UACzC,SAAQ;AAAA,UACR,yBAAsB;AAAA,UAEtB,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,UACD,uBAAuB;AAAA,YACrB,iBAAiB;AAAA,UACnB;AAAA,UAGA;AAAA,YAAC,wBAAwB;AAAA,YAAxB;AAAA,cACC,OAAO;AAAA,gBACL,OAAO;AAAA,kBACL,QAAQ,CAAC;AAAA,kBACT,OAAO,CAAC;AAAA,kBACR,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": []
 }