@dynatrace/strato-components 3.2.1 → 3.3.0

package/esm/forms/calendar/CalendarRoot.js

@@ -0,0 +1,214 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef
+} from "react";
+import { CalendarHeader } from "./calendar-header/CalendarHeader.js";
+import { CALENDAR_ERROR_MESSAGES } from "./calendarMessages.js";
+import { VisuallyHidden } from "../../core/components/visually-hidden/VisuallyHidden.js";
+import { useCalendarStore } from "../../core/time/timeframeStore/useTimeframeStore.js";
+import { validate } from "../../core/time/validation.js";
+import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
+import { useFormFieldValidation } from "../forms-core/hooks/useFormFieldValidation.js";
+import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
+import {
+  calendarBodyCSS,
+  calendarCSS,
+  calendarDisabledCSS
+} from "./Calendar.sty.js";
+import { CalendarContext } from "./contexts/CalendarContext.js";
+import { useCalendar } from "./hooks/useCalendar.js";
+import { useCalendarNavigation } from "./hooks/useCalendarNavigation.js";
+import { SelectDayView } from "./views/SelectDayView.js";
+import { SelectMonthView } from "./views/SelectMonthView.js";
+import { SelectYearView } from "./views/SelectYearView.js";
+import { isFullTimeframe, isTimeframe } from "../../core/time/helpers.js";
+const COMPONENT_NAME = "Calendar";
+function renderView(view) {
+  switch (view) {
+    case "month":
+      return /* @__PURE__ */ jsx(SelectMonthView, {});
+    case "year":
+      return /* @__PURE__ */ jsx(SelectYearView, {});
+    default:
+      return /* @__PURE__ */ jsx(SelectDayView, {});
+  }
+}
+function CalendarComponent(props, forwardedRef) {
+  const {
+    className: consumerClassName,
+    style: consumerStyle,
+    "data-testid": dataTestId,
+    id,
+    disabled,
+    "aria-disabled": ariaDisabled,
+    required,
+    name,
+    readOnly = false,
+    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment
+    // @ts-ignore Strict mode transition - needs to be investigated
+    type = "single",
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp,
+    "aria-describedby": ariaDescribedByProp,
+    "aria-details": ariaDetailsProp,
+    ...remainingProps
+  } = props;
+  const calendarValue = useCalendarStore((state2) => state2.calendarValue);
+  const min = useCalendarStore((state2) => state2.min);
+  const max = useCalendarStore((state2) => state2.max);
+  const error = useCalendarStore((state2) => state2.calendarError);
+  const precision = useCalendarStore((state2) => state2.precision);
+  const calendarRef = useRef(null);
+  const ref = useRef(null);
+  const refTo = useRef(null);
+  const { uniqueId, state, dispatch } = useCalendar({
+    type
+  });
+  useCalendarNavigation({
+    calendarRef,
+    view: state.currentView,
+    dispatch
+  });
+  const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();
+  const refValidate = useCallback(() => {
+    formMessageDispatch?.({
+      type: FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: true }
+    });
+    validate(calendarValue, min, max, {
+      formMessageDispatch,
+      formerError: error,
+      precision,
+      showError: true,
+      checkOrder: false,
+      ref,
+      errorMessages: CALENDAR_ERROR_MESSAGES
+    });
+  }, [min, max, formMessageDispatch, error, precision, ref, calendarValue]);
+  useImperativeHandle(
+    forwardedRef,
+    () => {
+      if (type === "single") {
+        return {
+          element: calendarRef.current,
+          inputRef: ref.current,
+          validate: refValidate
+        };
+      }
+      return {
+        element: calendarRef.current,
+        inputRef: {
+          from: ref?.current,
+          to: refTo?.current
+        },
+        validate: refValidate
+      };
+    },
+    [refValidate, type]
+  );
+  const {
+    ariaProps,
+    onChange: validationOnChange,
+    onBlur,
+    onInvalid
+  } = useFormFieldValidation(
+    ref,
+    {},
+    {
+      "aria-label": ariaLabelProp,
+      "aria-labelledby": ariaLabelledByProp,
+      "aria-describedby": ariaDescribedByProp,
+      "aria-details": ariaDetailsProp
+    }
+  );
+  const labelRef = useRef(`calendar-body-label-${uniqueId}`);
+  const disabledOrAriaDisabled = disabled || ariaDisabled || false;
+  const getNativeProps = (suffix = "") => ({
+    readOnly,
+    required,
+    disabled,
+    "aria-disabled": ariaDisabled,
+    name: name && `${name}${suffix}`,
+    id
+  });
+  const calenderContextValue = useMemo(
+    () => ({ state, dispatch, readOnly }),
+    [state, dispatch, readOnly]
+  );
+  return /* @__PURE__ */ jsxs(CalendarContext.Provider, { value: calenderContextValue, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(calendarCSS({ readOnly }), consumerClassName, {
+          [calendarDisabledCSS]: disabledOrAriaDisabled
+        }),
+        "data-testid": dataTestId,
+        ref: calendarRef,
+        style: consumerStyle,
+        ...remainingProps,
+        "data-dt-component": COMPONENT_NAME,
+        children: [
+          /* @__PURE__ */ jsx(CalendarHeader, { view: state.currentView, labelId: labelRef.current }),
+          /* @__PURE__ */ jsx("div", { "aria-labelledby": labelRef.current, children: /* @__PURE__ */ jsx(
+            "table",
+            {
+              role: "grid",
+              className: calendarBodyCSS({
+                isReadOnly: !!readOnly
+              }),
+              children: renderView(state.currentView)
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: isTimeframe(calendarValue, state.type) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          onChange: validationOnChange,
+          onBlur,
+          onInvalid,
+          ...ariaProps,
+          ...getNativeProps("-from"),
+          ref,
+          value: isFullTimeframe(calendarValue) && calendarValue?.from?.value ? calendarValue.from.value : "",
+          tabIndex: -1
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...getNativeProps("-to"),
+          ref: refTo,
+          value: calendarValue?.to?.value ?? "",
+          id: `${id}-to`,
+          type: "hidden"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      "input",
+      {
+        onChange: validationOnChange,
+        onBlur,
+        onInvalid,
+        ...ariaProps,
+        ...getNativeProps(),
+        ref,
+        value: calendarValue?.absoluteDate ?? "",
+        tabIndex: -1
+      }
+    ) })
+  ] });
+}
+CalendarComponent["displayName"] = COMPONENT_NAME;
+const CalendarRoot = forwardRef(CalendarComponent);
+export {
+  CalendarRoot
+};
+//# sourceMappingURL=CalendarRoot.js.map

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

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

package/esm/forms/calendar/calendar-header/CalendarHeader.js

@@ -16,27 +16,33 @@ import { useCalendarContext } from "../hooks/useCalendarContext.js";
 import { NUMBER_OF_YEARS } from "../types/calendarConfiguration.js";
 function getViewSpecificProps(view) {
   switch (view) {
-    case "day":
+    case "day": {
+      const nextView = "month";
       return {
         label: /* @__PURE__ */ jsx(SelectDateLabel, {}),
-        nextView: "month",
-        headerDataDtName: "ChangeToMonthsView",
-        payload: { amount: 1, unit: "month" }
+        nextView,
+        headerDataDtProperties: `value:${nextView}`,
+        payload: { amount: 1, unit: nextView }
       };
-    case "month":
+    }
+    case "month": {
+      const nextView = "year";
       return {
         label: /* @__PURE__ */ jsx(SelectMonthLabel, {}),
-        nextView: "year",
-        headerDataDtName: "ChangeToYearsView",
-        payload: { amount: 1, unit: "year" }
+        nextView,
+        headerDataDtProperties: `value:${nextView}`,
+        payload: { amount: 1, unit: nextView }
       };
-    case "year":
+    }
+    case "year": {
+      const nextView = "day";
       return {
         label: /* @__PURE__ */ jsx(SelectYearLabel, {}),
-        nextView: "day",
-        headerDataDtName: "ChangeToDaysView",
+        nextView,
+        headerDataDtProperties: `value:${nextView}`,
         payload: { amount: NUMBER_OF_YEARS }
       };
+    }
   }
 }
 const CalendarHeader = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
@@ -44,7 +50,7 @@ const CalendarHeader = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const { dispatch } = useCalendarContext();
   const { disabled, ariaDisabled } = useFormFieldContext();
   const intl = useIntl();
-  const { label, nextView, payload, headerDataDtName } = getViewSpecificProps(view);
+  const { label, nextView, payload, headerDataDtProperties } = getViewSpecificProps(view);
   return /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", marginBottom: 16, children: [
     /* @__PURE__ */ jsx(
       Button,
@@ -77,7 +83,8 @@ const CalendarHeader = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
           payload: nextView
         }),
         ref: forwardedRef,
-        "data-dt-name": headerDataDtName,
+        "data-dt-name": "ChangeView",
+        "data-dt-properties": headerDataDtProperties,
         children: label
       }
     ),

package/esm/forms/calendar/calendar-header/CalendarHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/calendar-header/CalendarHeader.tsx"],
-  "sourcesContent": ["import { forwardRef, type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronLeftSmallIcon,\n  ChevronRightSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../buttons/button/Button.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { SelectDateLabel } from '../calendar-header-label/SelectDateLabel.js';\nimport { SelectMonthLabel } from '../calendar-header-label/SelectMonthLabel.js';\nimport { SelectYearLabel } from '../calendar-header-label/SelectYearLabel.js';\nimport * as itemStyles from '../components/CalendarItem.sty.js';\nimport { useCalendarContext } from '../hooks/useCalendarContext.js';\nimport { NUMBER_OF_YEARS } from '../types/calendarConfiguration.js';\nimport type { CalendarViewType } from '../types/shared-types.js';\n\n/**\n * @internal\n */\ninterface CalendarHeaderProps {\n  /** The view currently shown to provide the proper text content. */\n  view: CalendarViewType;\n  /** Calendar header label id used for the 'aria-labelledby' attribute. */\n  labelId: string;\n}\n\n/**\n * Returns the right values for label, nextView, data-dt-name for the header button,\n * and the navigation button payload for each view.\n */\nfunction getViewSpecificProps(view: CalendarViewType): {\n  label: JSX.Element;\n  nextView: CalendarViewType;\n  headerDataDtName: string;\n  payload: { amount: number; unit?: CalendarViewType };\n} {\n  switch (view) {\n    case 'day':\n      return {\n        label: <SelectDateLabel />,\n        nextView: 'month',\n        headerDataDtName: 'ChangeToMonthsView',\n        payload: { amount: 1, unit: 'month' },\n      };\n    case 'month':\n      return {\n        label: <SelectMonthLabel />,\n        nextView: 'year',\n        headerDataDtName: 'ChangeToYearsView',\n        payload: { amount: 1, unit: 'year' },\n      };\n    case 'year':\n      return {\n        label: <SelectYearLabel />,\n        nextView: 'day',\n        headerDataDtName: 'ChangeToDaysView',\n        payload: { amount: NUMBER_OF_YEARS },\n      };\n  }\n}\n\n/**\n * CalendarHeader component\n * Renders the calendar header, including the buttons to navigate to the previous/next\n * month/year/list of years and the button (label) to switch the calendar view.\n * @internal\n */\nexport const CalendarHeader = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  CalendarHeaderProps\n>((props: CalendarHeaderProps, forwardedRef) => {\n  const { labelId, view } = props;\n  const { dispatch } = useCalendarContext();\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const intl = useIntl();\n\n  const { label, nextView, payload, headerDataDtName } =\n    getViewSpecificProps(view);\n\n  return (\n    <Flex justifyContent=\"space-between\" marginBottom={16}>\n      <Button\n        disabled={disabled}\n        aria-disabled={ariaDisabled}\n        aria-label={intl.formatMessage({\n          defaultMessage: 'Go to previous page.',\n          id: 'VoqQWp9yEM0QM8eF',\n          description: 'Aria label to add to the `previous` button',\n        })}\n        onClick={() =>\n          dispatch({\n            type: 'navigateCurrentView',\n            payload: { ...payload, amount: payload.amount * -1 },\n          })\n        }\n        data-dt-name=\"PreviousPage\"\n      >\n        <Button.Prefix>\n          <ChevronLeftSmallIcon />\n        </Button.Prefix>\n      </Button>\n      <Button\n        className={itemStyles.headerButton}\n        disabled={disabled}\n        aria-disabled={ariaDisabled}\n        aria-live=\"polite\"\n        id={labelId}\n        onClick={() =>\n          dispatch({\n            type: 'currentViewChange',\n            payload: nextView,\n          })\n        }\n        ref={forwardedRef}\n        data-dt-name={headerDataDtName}\n      >\n        {label}\n      </Button>\n      <Button\n        disabled={disabled}\n        aria-disabled={ariaDisabled}\n        aria-label={intl.formatMessage({\n          defaultMessage: 'Go to next page.',\n          id: 'KAAzM9PVtiJno9ks',\n          description: 'Aria label to add to the `next` button',\n        })}\n        onClick={() =>\n          dispatch({\n            type: 'navigateCurrentView',\n            payload,\n          })\n        }\n        data-dt-name=\"NextPage\"\n      >\n        <Button.Prefix>\n          <ChevronRightSmallIcon />\n        </Button.Prefix>\n      </Button>\n    </Flex>\n  );\n});\n\n(\n  CalendarHeader as typeof CalendarHeader & { displayName: string }\n).displayName = 'CalendarHeader';\n"],
-  "mappings": "AA0Ce,cAyCX,YAzCW;AA1Cf,SAAS,kBAA4B;AACrC,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,YAAY,gBAAgB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAiBhC,SAAS,qBAAqB,MAK5B;AACA,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,QACL,OAAO,oBAAC,mBAAgB;AAAA,QACxB,UAAU;AAAA,QACV,kBAAkB;AAAA,QAClB,SAAS,EAAE,QAAQ,GAAG,MAAM,QAAQ;AAAA,MACtC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,OAAO,oBAAC,oBAAiB;AAAA,QACzB,UAAU;AAAA,QACV,kBAAkB;AAAA,QAClB,SAAS,EAAE,QAAQ,GAAG,MAAM,OAAO;AAAA,MACrC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,OAAO,oBAAC,mBAAgB;AAAA,QACxB,UAAU;AAAA,QACV,kBAAkB;AAAA,QAClB,SAAS,EAAE,QAAQ,gBAAgB;AAAA,MACrC;AAAA,EACJ;AACF;AAQO,MAAM,iBAAiC,2BAG5C,CAAC,OAA4B,iBAAiB;AAC9C,QAAM,EAAE,SAAS,KAAK,IAAI;AAC1B,QAAM,EAAE,SAAS,IAAI,mBAAmB;AACxC,QAAM,EAAE,UAAU,aAAa,IAAI,oBAAoB;AACvD,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,OAAO,UAAU,SAAS,iBAAiB,IACjD,qBAAqB,IAAI;AAE3B,SACE,qBAAC,QAAK,gBAAe,iBAAgB,cAAc,IACjD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,iBAAe;AAAA,QACf,cAAY,KAAK,cAAc;AAAA,UAC7B,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aAAa;AAAA,QACf,CAAC;AAAA,QACD,SAAS,MACP,SAAS;AAAA,UACP,MAAM;AAAA,UACN,SAAS,EAAE,GAAG,SAAS,QAAQ,QAAQ,SAAS,GAAG;AAAA,QACrD,CAAC;AAAA,QAEH,gBAAa;AAAA,QAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,wBAAqB,GACxB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW;AAAA,QACtB;AAAA,QACA,iBAAe;AAAA,QACf,aAAU;AAAA,QACV,IAAI;AAAA,QACJ,SAAS,MACP,SAAS;AAAA,UACP,MAAM;AAAA,UACN,SAAS;AAAA,QACX,CAAC;AAAA,QAEH,KAAK;AAAA,QACL,gBAAc;AAAA,QAEb;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,iBAAe;AAAA,QACf,cAAY,KAAK,cAAc;AAAA,UAC7B,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aAAa;AAAA,QACf,CAAC;AAAA,QACD,SAAS,MACP,SAAS;AAAA,UACP,MAAM;AAAA,UACN;AAAA,QACF,CAAC;AAAA,QAEH,gBAAa;AAAA,QAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,yBAAsB,GACzB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;AAGC,eACA,cAAc;",
+  "sourcesContent": ["import { forwardRef, type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronLeftSmallIcon,\n  ChevronRightSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../buttons/button/Button.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { SelectDateLabel } from '../calendar-header-label/SelectDateLabel.js';\nimport { SelectMonthLabel } from '../calendar-header-label/SelectMonthLabel.js';\nimport { SelectYearLabel } from '../calendar-header-label/SelectYearLabel.js';\nimport * as itemStyles from '../components/CalendarItem.sty.js';\nimport { useCalendarContext } from '../hooks/useCalendarContext.js';\nimport { NUMBER_OF_YEARS } from '../types/calendarConfiguration.js';\nimport type { CalendarViewType } from '../types/shared-types.js';\n\n/**\n * @internal\n */\ninterface CalendarHeaderProps {\n  /** The view currently shown to provide the proper text content. */\n  view: CalendarViewType;\n  /** Calendar header label id used for the 'aria-labelledby' attribute. */\n  labelId: string;\n}\n\n/**\n * Returns the right values for label, nextView, data-dt-name for the header button,\n * and the navigation button payload for each view.\n */\nfunction getViewSpecificProps(view: CalendarViewType): {\n  label: JSX.Element;\n  nextView: CalendarViewType;\n  headerDataDtProperties: string;\n  payload: { amount: number; unit?: CalendarViewType };\n} {\n  switch (view) {\n    case 'day': {\n      const nextView = 'month';\n      return {\n        label: <SelectDateLabel />,\n        nextView,\n        headerDataDtProperties: `value:${nextView}`,\n        payload: { amount: 1, unit: nextView },\n      };\n    }\n    case 'month': {\n      const nextView = 'year';\n      return {\n        label: <SelectMonthLabel />,\n        nextView,\n        headerDataDtProperties: `value:${nextView}`,\n        payload: { amount: 1, unit: nextView },\n      };\n    }\n    case 'year': {\n      const nextView = 'day';\n      return {\n        label: <SelectYearLabel />,\n        nextView,\n        headerDataDtProperties: `value:${nextView}`,\n        payload: { amount: NUMBER_OF_YEARS },\n      };\n    }\n  }\n}\n\n/**\n * CalendarHeader component\n * Renders the calendar header, including the buttons to navigate to the previous/next\n * month/year/list of years and the button (label) to switch the calendar view.\n * @internal\n */\nexport const CalendarHeader = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  CalendarHeaderProps\n>((props: CalendarHeaderProps, forwardedRef) => {\n  const { labelId, view } = props;\n\n  const { dispatch } = useCalendarContext();\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const intl = useIntl();\n\n  const { label, nextView, payload, headerDataDtProperties } =\n    getViewSpecificProps(view);\n\n  return (\n    <Flex justifyContent=\"space-between\" marginBottom={16}>\n      <Button\n        disabled={disabled}\n        aria-disabled={ariaDisabled}\n        aria-label={intl.formatMessage({\n          defaultMessage: 'Go to previous page.',\n          id: 'VoqQWp9yEM0QM8eF',\n          description: 'Aria label to add to the `previous` button',\n        })}\n        onClick={() =>\n          dispatch({\n            type: 'navigateCurrentView',\n            payload: { ...payload, amount: payload.amount * -1 },\n          })\n        }\n        data-dt-name=\"PreviousPage\"\n      >\n        <Button.Prefix>\n          <ChevronLeftSmallIcon />\n        </Button.Prefix>\n      </Button>\n      <Button\n        className={itemStyles.headerButton}\n        disabled={disabled}\n        aria-disabled={ariaDisabled}\n        aria-live=\"polite\"\n        id={labelId}\n        onClick={() =>\n          dispatch({\n            type: 'currentViewChange',\n            payload: nextView,\n          })\n        }\n        ref={forwardedRef}\n        data-dt-name=\"ChangeView\"\n        data-dt-properties={headerDataDtProperties}\n      >\n        {label}\n      </Button>\n      <Button\n        disabled={disabled}\n        aria-disabled={ariaDisabled}\n        aria-label={intl.formatMessage({\n          defaultMessage: 'Go to next page.',\n          id: 'KAAzM9PVtiJno9ks',\n          description: 'Aria label to add to the `next` button',\n        })}\n        onClick={() =>\n          dispatch({\n            type: 'navigateCurrentView',\n            payload,\n          })\n        }\n        data-dt-name=\"NextPage\"\n      >\n        <Button.Prefix>\n          <ChevronRightSmallIcon />\n        </Button.Prefix>\n      </Button>\n    </Flex>\n  );\n});\n\n(\n  CalendarHeader as typeof CalendarHeader & { displayName: string }\n).displayName = 'CalendarHeader';\n"],
+  "mappings": "AA2Ce,cA+CX,YA/CW;AA3Cf,SAAS,kBAA4B;AACrC,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,YAAY,gBAAgB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAiBhC,SAAS,qBAAqB,MAK5B;AACA,UAAQ,MAAM;AAAA,IACZ,KAAK,OAAO;AACV,YAAM,WAAW;AACjB,aAAO;AAAA,QACL,OAAO,oBAAC,mBAAgB;AAAA,QACxB;AAAA,QACA,wBAAwB,SAAS,QAAQ;AAAA,QACzC,SAAS,EAAE,QAAQ,GAAG,MAAM,SAAS;AAAA,MACvC;AAAA,IACF;AAAA,IACA,KAAK,SAAS;AACZ,YAAM,WAAW;AACjB,aAAO;AAAA,QACL,OAAO,oBAAC,oBAAiB;AAAA,QACzB;AAAA,QACA,wBAAwB,SAAS,QAAQ;AAAA,QACzC,SAAS,EAAE,QAAQ,GAAG,MAAM,SAAS;AAAA,MACvC;AAAA,IACF;AAAA,IACA,KAAK,QAAQ;AACX,YAAM,WAAW;AACjB,aAAO;AAAA,QACL,OAAO,oBAAC,mBAAgB;AAAA,QACxB;AAAA,QACA,wBAAwB,SAAS,QAAQ;AAAA,QACzC,SAAS,EAAE,QAAQ,gBAAgB;AAAA,MACrC;AAAA,IACF;AAAA,EACF;AACF;AAQO,MAAM,iBAAiC,2BAG5C,CAAC,OAA4B,iBAAiB;AAC9C,QAAM,EAAE,SAAS,KAAK,IAAI;AAE1B,QAAM,EAAE,SAAS,IAAI,mBAAmB;AACxC,QAAM,EAAE,UAAU,aAAa,IAAI,oBAAoB;AACvD,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,OAAO,UAAU,SAAS,uBAAuB,IACvD,qBAAqB,IAAI;AAE3B,SACE,qBAAC,QAAK,gBAAe,iBAAgB,cAAc,IACjD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,iBAAe;AAAA,QACf,cAAY,KAAK,cAAc;AAAA,UAC7B,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aAAa;AAAA,QACf,CAAC;AAAA,QACD,SAAS,MACP,SAAS;AAAA,UACP,MAAM;AAAA,UACN,SAAS,EAAE,GAAG,SAAS,QAAQ,QAAQ,SAAS,GAAG;AAAA,QACrD,CAAC;AAAA,QAEH,gBAAa;AAAA,QAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,wBAAqB,GACxB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW;AAAA,QACtB;AAAA,QACA,iBAAe;AAAA,QACf,aAAU;AAAA,QACV,IAAI;AAAA,QACJ,SAAS,MACP,SAAS;AAAA,UACP,MAAM;AAAA,UACN,SAAS;AAAA,QACX,CAAC;AAAA,QAEH,KAAK;AAAA,QACL,gBAAa;AAAA,QACb,sBAAoB;AAAA,QAEnB;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,iBAAe;AAAA,QACf,cAAY,KAAK,cAAc;AAAA,UAC7B,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aAAa;AAAA,QACf,CAAC;AAAA,QACD,SAAS,MACP,SAAS;AAAA,UACP,MAAM;AAAA,UACN;AAAA,QACF,CAAC;AAAA,QAEH,gBAAa;AAAA,QAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,yBAAsB,GACzB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;AAGC,eACA,cAAc;",
   "names": []
 }

package/esm/forms/calendar/calendarMessages.js

@@ -0,0 +1,22 @@
+import { defineMessages } from "react-intl";
+const CALENDAR_ERROR_MESSAGES = defineMessages({
+  minBoundary: {
+    id: "9XjoWQoeIKxStpgZ",
+    defaultMessage: "Please select a {term} later than {min}.",
+    description: "Error message for a date or a timeframe earlier than the required minimum."
+  },
+  maxBoundary: {
+    id: "0Y8wN2jk+BAa2NoC",
+    defaultMessage: "Please select a {term} earlier than {max}.",
+    description: "Error message for a date or a timeframe later then the expected maximum."
+  },
+  minMaxBoundary: {
+    id: "LNWPcycjuDPimFKd",
+    defaultMessage: "Please select a {term} within the range of {min} and {max}.",
+    description: "Error message for a date or a timeframe outside the selectable range."
+  }
+});
+export {
+  CALENDAR_ERROR_MESSAGES
+};
+//# sourceMappingURL=calendarMessages.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/calendar/calendarMessages.ts"],
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\n/**\n * Error messages used by the Calendar component for boundary validation.\n * These are distinct from the TimeframeSelector messages to provide\n * calendar-appropriate wording.\n * @internal\n */\nexport const CALENDAR_ERROR_MESSAGES = defineMessages({\n  minBoundary: {\n    id: '9XjoWQoeIKxStpgZ',\n    defaultMessage: 'Please select a {term} later than {min}.',\n    description:\n      'Error message for a date or a timeframe earlier than the required minimum.',\n  },\n  maxBoundary: {\n    id: '0Y8wN2jk+BAa2NoC',\n    defaultMessage: 'Please select a {term} earlier than {max}.',\n    description:\n      'Error message for a date or a timeframe later then the expected maximum.',\n  },\n  minMaxBoundary: {\n    id: 'LNWPcycjuDPimFKd',\n    defaultMessage:\n      'Please select a {term} within the range of {min} and {max}.',\n    description:\n      'Error message for a date or a timeframe outside the selectable range.',\n  },\n});\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAQxB,MAAM,0BAA0B,eAAe;AAAA,EACpD,aAAa;AAAA,IACX,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AAAA,EACA,aAAa;AAAA,IACX,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AAAA,EACA,gBAAgB;AAAA,IACd,IAAI;AAAA,IACJ,gBACE;AAAA,IACF,aACE;AAAA,EACJ;AACF,CAAC;",
+  "names": []
+}

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

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

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

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

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

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

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

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

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

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

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

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