@dynatrace/strato-components 3.2.1 → 3.3.1

package/esm/forms/calendar/hooks/useCalendar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/hooks/useCalendar.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { startOfDay } from 'date-fns';\nimport { useCallback, useEffect, useMemo, useReducer } from 'react';\n\nimport { parseTimeAsTimeValue } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useId } from '../../../core/hooks/useId.js';\nimport type { TimeValue, Timeframe } from '../../../core/types/time.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport type { FormFieldMessagesReducerAction } from '../../forms-core/state/formfield-messages-state-reducer.js';\nimport { isTimeframe } from '../../forms-core/time/types.js';\nimport { useIntervalCallback } from '../../forms-core/time/useIntervalCallback.js';\nimport type {\n  CalendarProps,\n  CalendarStrictValueType,\n} from '../Calendar.types.js';\nimport { initialState as defaultState } from '../contexts/CalendarContext.js';\nimport { reducer } from '../state/calendar-state-reducer.js';\nimport { validateCalendarSelection } from '../state/calendar-validation.js';\nimport {\n  ONE_DAY_IN_MILLISECONDS,\n  type CalendarType,\n} from '../types/calendarConfiguration.js';\nimport type {\n  CalendarReducerAction,\n  CalendarState,\n} from '../types/shared-types.js';\nimport {\n  convertToCalendarStructure,\n  getTimeOffsetFromInitialValue,\n} from '../utils/helpers.js';\n\n//#region types\n/** @internal */\nexport type UseCalendarProps<Type extends CalendarType> = Pick<\n  CalendarProps<Type>,\n  'max' | 'min' | 'onChange' | 'type' | 'precision'\n> & {\n  value: CalendarStrictValueType<Type>;\n};\n//#endregion\n\n/**\n * Checks whether the passed value is a Timeframe and checks if the value equals the second timeframe.\n * This check is for range calendars.\n */\nfunction isDifferentTimeframe(\n  calendarValue: Partial<Timeframe> | TimeValue | null,\n  selectedDate: Partial<Timeframe> | TimeValue | null,\n  type: CalendarType,\n) {\n  return (\n    isTimeframe(calendarValue, type) &&\n    isTimeframe(selectedDate, type) &&\n    !(\n      calendarValue?.from?.value === selectedDate?.from?.value &&\n      calendarValue?.to?.value === selectedDate?.to?.value\n    )\n  );\n}\n\n/**\n * Checks whether the passed value is of type TimeValue and checks if the value equals the second timeframe.\n * This check is for single calendars.\n */\nfunction isDifferentTimeValue(\n  calendarValue: Partial<Timeframe> | TimeValue | null,\n  selectedDate: Partial<Timeframe> | TimeValue | null,\n  type: CalendarType,\n) {\n  return (\n    !isTimeframe(selectedDate, type) &&\n    !isTimeframe(calendarValue, type) &&\n    calendarValue?.value !== selectedDate?.value\n  );\n}\n\n/**\n * Calendar hook to initialize the calendar state and update it to prop changes.\n * @internal\n */\nexport function useCalendar<Type extends CalendarType>({\n  value,\n  onChange,\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  min,\n  max,\n  precision,\n}: UseCalendarProps<Type>) {\n  const uniqueId = useId();\n  // All parse times here need to use the same _now_ date, to not be subject\n  // to millisecond differences during parsing.\n  const configuredTimezone = getTimezone();\n  const relativeNow = TZDateMini.tz(configuredTimezone).getTime();\n\n  const untilMidnight = useCallback(\n    (isoString: string | undefined): number => {\n      const timezone = getTimezone();\n      const date = new TZDateMini(\n        parseTimeAsTimeValue(isoString, relativeNow)?.absoluteDate ?? '',\n        timezone,\n      );\n      if (isNaN(date.getTime())) {\n        return ONE_DAY_IN_MILLISECONDS;\n      }\n\n      const midnight = new TZDateMini(\n        date.getFullYear(),\n        date.getMonth(),\n        date.getDate() + 1,\n        timezone,\n      );\n      return midnight.getTime() - date.getTime();\n    },\n    // Should not update every render and the relativeNow would cause that.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [min, max],\n  );\n\n  const { value: minDate } = useIntervalCallback(\n    () => parseTimeAsTimeValue(min, relativeNow),\n    [min],\n    untilMidnight(min),\n    ONE_DAY_IN_MILLISECONDS,\n  );\n\n  const { value: maxDate } = useIntervalCallback(\n    () => parseTimeAsTimeValue(max, relativeNow),\n    [max],\n    untilMidnight(max),\n    ONE_DAY_IN_MILLISECONDS,\n  );\n\n  const timeOffset = useMemo(\n    () =>\n      getTimeOffsetFromInitialValue<Type>(\n        value,\n        type,\n        minDate,\n        maxDate,\n        precision,\n      ),\n    [maxDate, minDate, precision, type, value],\n  );\n\n  const calendarValue = convertToCalendarStructure<Type>(\n    timeOffset,\n    type,\n    value,\n    minDate ?? undefined,\n    maxDate ?? undefined,\n    precision,\n  );\n\n  const activeISODate = isTimeframe(calendarValue, type)\n    ? calendarValue.from?.absoluteDate\n    : calendarValue?.absoluteDate;\n\n  const today = startOfDay(TZDateMini.tz(configuredTimezone));\n\n  const initialState = {\n    ...defaultState,\n    position: type === 'single' ? undefined : 'from',\n    type,\n    min: minDate,\n    max: maxDate,\n    selectedDate: calendarValue,\n    activeDate: new TZDateMini(\n      activeISODate ?? today.toISOString(),\n      configuredTimezone,\n    ),\n    // If it is initialized with a timeoffset it keeps the offset.\n    // This will be customizable in the future.\n    timeOffset,\n  };\n\n  const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();\n\n  const callback = useCallback(\n    (state: CalendarState, action: CalendarReducerAction) =>\n      reducer(\n        state,\n        action,\n        (args: FormFieldMessagesReducerAction) => {\n          // Delay the ErrorMessage update by a tick to not update the calendar state and the message state at the same time.\n          window.setTimeout(() => {\n            formMessageDispatch?.(args);\n          });\n        },\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        onChange,\n        precision,\n      ),\n    [formMessageDispatch, onChange, precision],\n  );\n\n  const [state, dispatch] = useReducer(\n    callback,\n    // activeDate might be undefined but will be set in the initializer, to ensure the correct timezone.\n    initialState as CalendarState,\n    (state: CalendarState) => {\n      // Make sure the state initializes with a new TZDateMini when the component is created\n      // instead of on the module scope.\n      // Extract the user-settings timezone to use for the calculation\n\n      const internalError = validateCalendarSelection(\n        state.selectedDate,\n        state,\n        (args: FormFieldMessagesReducerAction) => {\n          // Delay the ErrorMessage update by a tick to not update the calendar state and the message state at the same time.\n          window.setTimeout(() => {\n            formMessageDispatch?.(args);\n          });\n        },\n      );\n\n      return {\n        ...state,\n        errorId: internalError,\n        activeDate: state.activeDate ?? today,\n        today,\n      };\n    },\n  );\n\n  /** Updates the state in case of a controlled update from the outside. */\n  if (\n    isDifferentTimeframe(calendarValue, state.selectedDate, type) ||\n    isDifferentTimeValue(calendarValue, state.selectedDate, type)\n  ) {\n    dispatch({\n      type: 'valueChanged',\n      payload: calendarValue,\n    });\n  }\n\n  if (type !== state.type) {\n    dispatch({\n      type: 'typeChanged',\n      payload: { type, position: type === 'single' ? undefined : 'from' },\n    });\n  }\n\n  useEffect(() => {\n    dispatch?.({\n      type: 'minMaxChanged',\n      payload: { min: minDate ?? undefined, max: maxDate ?? undefined },\n    });\n    // Should only update when min or max changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [minDate?.absoluteDate, maxDate?.absoluteDate]);\n\n  return { state, dispatch, uniqueId };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { isValid, startOfDay } from 'date-fns';\nimport { useReducer } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useId } from '../../../core/hooks/useId.js';\nimport { isTimeframe } from '../../../core/time/helpers.js';\nimport { useCalendarStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type {\n  CalendarProps,\n  CalendarStrictValueType,\n} from '../Calendar.types.js';\nimport { initialState as defaultState } from '../contexts/CalendarContext.js';\nimport { reducer } from '../state/calendar-state-reducer.js';\nimport { type CalendarType } from '../types/calendarConfiguration.js';\nimport type { CalendarState } from '../types/shared-types.js';\n\n//#region types\n/** @internal */\nexport type UseCalendarProps<Type extends CalendarType> = Pick<\n  CalendarProps<Type>,\n  'onChange' | 'type' | 'precision'\n> & {\n  value: CalendarStrictValueType<Type>;\n};\n//#endregion\n\n/**\n * Calendar hook to initialize the calendar state and update it to prop changes.\n * @internal\n */\nexport function useCalendar<Type extends CalendarType>({\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}: UseCalendarProps<Type>) {\n  const uniqueId = useId();\n  // All parse times here need to use the same _now_ date, to not be subject\n  // to millisecond differences during parsing.\n  const configuredTimezone = getTimezone();\n\n  const calendarValue = useCalendarStore((state) => state.calendarValue);\n\n  const activeISODate = isTimeframe(calendarValue, type)\n    ? calendarValue?.from?.absoluteDate\n    : calendarValue?.absoluteDate;\n\n  const today = startOfDay(TZDateMini.tz(configuredTimezone));\n\n  const parsedActiveDate = new TZDateMini(\n    activeISODate ?? today.toISOString(),\n    configuredTimezone,\n  );\n\n  const initialState: CalendarState = {\n    ...defaultState,\n    type,\n    activeDate: isValid(parsedActiveDate) ? parsedActiveDate : today,\n  };\n\n  const [state, dispatch] = useReducer(\n    reducer,\n    // activeDate might be undefined but will be set in the initializer, to ensure the correct timezone.\n    initialState,\n    (state: CalendarState) => {\n      // Make sure the state initializes with a new TZDateMini when the component is created\n      // instead of on the module scope.\n      // Extract the user-settings timezone to use for the calculation\n\n      return {\n        ...state,\n        activeDate: state.activeDate ?? today,\n        today,\n      };\n    },\n  );\n\n  return { state, dispatch, uniqueId };\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,SAAS,kBAAkB;AACpC,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAE5B,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAKjC,SAAS,gBAAgB,oBAAoB;AAC7C,SAAS,eAAe;AAkBjB,SAAS,YAAuC;AAAA;AAAA;AAAA,EAGrD,OAAO;AACT,GAA2B;AACzB,QAAM,WAAW,MAAM;AAGvB,QAAM,qBAAqB,YAAY;AAEvC,QAAM,gBAAgB,iBAAiB,CAACA,WAAUA,OAAM,aAAa;AAErE,QAAM,gBAAgB,YAAY,eAAe,IAAI,IACjD,eAAe,MAAM,eACrB,eAAe;AAEnB,QAAM,QAAQ,WAAW,WAAW,GAAG,kBAAkB,CAAC;AAE1D,QAAM,mBAAmB,IAAI;AAAA,IAC3B,iBAAiB,MAAM,YAAY;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,eAA8B;AAAA,IAClC,GAAG;AAAA,IACH;AAAA,IACA,YAAY,QAAQ,gBAAgB,IAAI,mBAAmB;AAAA,EAC7D;AAEA,QAAM,CAAC,OAAO,QAAQ,IAAI;AAAA,IACxB;AAAA;AAAA,IAEA;AAAA,IACA,CAACA,WAAyB;AAKxB,aAAO;AAAA,QACL,GAAGA;AAAA,QACH,YAAYA,OAAM,cAAc;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,OAAO,UAAU,SAAS;AACrC;",
   "names": ["state"]
 }

package/esm/forms/calendar/hooks/useMonth.js

@@ -6,11 +6,15 @@ import { formatDate } from "@dynatrace-sdk/units";
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
 import { useCalendarContext } from "./useCalendarContext.js";
 import { useFocus } from "./useFocus.js";
-import { isTimeframe } from "../../forms-core/time/types.js";
-import { isOutOfBounds } from "../state/calendar-validation.js";
+import { isTimeframe } from "../../../core/time/helpers.js";
+import { useCalendarStore } from "../../../core/time/timeframeStore/useTimeframeStore.js";
+import { isOutOfBounds } from "../../../core/time/validation.js";
 function useMonth({ date, itemRef }) {
   const { state, dispatch } = useCalendarContext();
   const configuredTimezone = getTimezone();
+  const value = useCalendarStore((store) => store.calendarValue);
+  const min = useCalendarStore((store) => store.min);
+  const max = useCalendarStore((store) => store.max);
   const intl = useIntl();
   const ariaLabel = useMemo(() => {
     const formatMessage = intl.formatMessage({
@@ -31,26 +35,24 @@ function useMonth({ date, itemRef }) {
     [date, state.activeDate]
   );
   const isSelected = useMemo(() => {
-    if (isTimeframe(state.selectedDate, state.type)) {
-      const { from, to } = state.selectedDate;
+    if (isTimeframe(value, state.type) && value) {
+      const { from, to } = value;
       const fromDate = from ? new TZDateMini(from.absoluteDate, configuredTimezone) : null;
       const toDate = to ? new TZDateMini(to.absoluteDate, configuredTimezone) : null;
       return !!(fromDate && isSameMonth(fromDate, date) || toDate && isSameMonth(toDate, date));
     }
-    const selectedDate = state.selectedDate ? startOfMonth(
-      new TZDateMini(state.selectedDate.absoluteDate, configuredTimezone)
-    ) : null;
+    const selectedDate = value ? startOfMonth(new TZDateMini(value.absoluteDate, configuredTimezone)) : null;
     if (!selectedDate) {
       return false;
     }
     return isSameMonth(selectedDate, date);
-  }, [configuredTimezone, state.selectedDate, state.type, date]);
+  }, [configuredTimezone, value, state.type, date]);
   const { tabIndex } = useFocus({ isFocused, itemRef });
   const isDisabled = useMemo(() => {
     const startDay = startOfMonth(date);
     const endDay = endOfMonth(date);
-    return isOutOfBounds(startDay, void 0, state.max?.value) || isOutOfBounds(endDay, state.min?.value);
-  }, [state.min, state.max, date]);
+    return !!(isOutOfBounds(startDay, void 0, max) || isOutOfBounds(endDay, min));
+  }, [min, max, date]);
   function onClick() {
     dispatch({
       type: "activeDateChange",

package/esm/forms/calendar/hooks/useMonth.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/hooks/useMonth.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { endOfMonth, isSameMonth, startOfMonth } from 'date-fns';\nimport { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { formatDate } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useCalendarContext } from './useCalendarContext.js';\nimport { useFocus } from './useFocus.js';\nimport { isTimeframe } from '../../forms-core/time/types.js';\nimport type { ViewItem } from '../components/CalendarItem.js';\nimport { isOutOfBounds } from '../state/calendar-validation.js';\nimport type { UseCalendarItemProps } from '../types/shared-types.js';\n\n/** Custom hook that retrieves properties from the current month. */\nexport function useMonth({ date, itemRef }: UseCalendarItemProps): ViewItem {\n  const { state, dispatch } = useCalendarContext();\n  const configuredTimezone = getTimezone();\n\n  const intl = useIntl();\n\n  const ariaLabel = useMemo(() => {\n    const formatMessage = intl.formatMessage({\n      defaultMessage: 'Select month',\n      id: 'aRc3KoQgfpti2E9M',\n      description: 'Aria label to add to each month button',\n    });\n    return `${formatMessage} ${formatDate(date, {\n      month: 'long',\n    })}`;\n  }, [intl, date]);\n\n  const isCurrent = useMemo(\n    () => isSameMonth(date, state.today),\n    [date, state.today],\n  );\n\n  const isFocused = useMemo(\n    () => isSameMonth(date, state.activeDate),\n    [date, state.activeDate],\n  );\n\n  const isSelected = useMemo(() => {\n    if (isTimeframe(state.selectedDate, state.type)) {\n      const { from, to } = state.selectedDate;\n      const fromDate = from\n        ? new TZDateMini(from.absoluteDate, configuredTimezone)\n        : null;\n      const toDate = to\n        ? new TZDateMini(to.absoluteDate, configuredTimezone)\n        : null;\n\n      return !!(\n        (fromDate && isSameMonth(fromDate, date)) ||\n        (toDate && isSameMonth(toDate, date))\n      );\n    }\n\n    const selectedDate = state.selectedDate\n      ? startOfMonth(\n          new TZDateMini(state.selectedDate.absoluteDate, configuredTimezone),\n        )\n      : null;\n\n    if (!selectedDate) {\n      return false;\n    }\n\n    return isSameMonth(selectedDate, date);\n  }, [configuredTimezone, state.selectedDate, state.type, date]);\n\n  const { tabIndex } = useFocus({ isFocused, itemRef });\n\n  const isDisabled = useMemo(() => {\n    const startDay = startOfMonth(date);\n    const endDay = endOfMonth(date);\n\n    return (\n      isOutOfBounds(startDay, undefined, state.max?.value) ||\n      isOutOfBounds(endDay, state.min?.value)\n    );\n  }, [state.min, state.max, date]);\n\n  /** Handle click on a month in the month view. */\n  function onClick() {\n    dispatch({\n      type: 'activeDateChange',\n      payload: { activeDate: date, changeToView: 'day' },\n    });\n\n    dispatch({ type: 'shouldUpdateFocusFromKeydown', payload: false });\n  }\n\n  return {\n    ariaLabel,\n    tabIndex,\n    isCurrent,\n    isSelected,\n    isDisabled,\n    onClick,\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAAY,aAAa,oBAAoB;AACtD,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAE5B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAE5B,SAAS,qBAAqB;AAIvB,SAAS,SAAS,EAAE,MAAM,QAAQ,GAAmC;AAC1E,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB;AAC/C,QAAM,qBAAqB,YAAY;AAEvC,QAAM,OAAO,QAAQ;AAErB,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,gBAAgB,KAAK,cAAc;AAAA,MACvC,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AACD,WAAO,GAAG,aAAa,IAAI,WAAW,MAAM;AAAA,MAC1C,OAAO;AAAA,IACT,CAAC,CAAC;AAAA,EACJ,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,YAAY;AAAA,IAChB,MAAM,YAAY,MAAM,MAAM,KAAK;AAAA,IACnC,CAAC,MAAM,MAAM,KAAK;AAAA,EACpB;AAEA,QAAM,YAAY;AAAA,IAChB,MAAM,YAAY,MAAM,MAAM,UAAU;AAAA,IACxC,CAAC,MAAM,MAAM,UAAU;AAAA,EACzB;AAEA,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,YAAY,MAAM,cAAc,MAAM,IAAI,GAAG;AAC/C,YAAM,EAAE,MAAM,GAAG,IAAI,MAAM;AAC3B,YAAM,WAAW,OACb,IAAI,WAAW,KAAK,cAAc,kBAAkB,IACpD;AACJ,YAAM,SAAS,KACX,IAAI,WAAW,GAAG,cAAc,kBAAkB,IAClD;AAEJ,aAAO,CAAC,EACL,YAAY,YAAY,UAAU,IAAI,KACtC,UAAU,YAAY,QAAQ,IAAI;AAAA,IAEvC;AAEA,UAAM,eAAe,MAAM,eACvB;AAAA,MACE,IAAI,WAAW,MAAM,aAAa,cAAc,kBAAkB;AAAA,IACpE,IACA;AAEJ,QAAI,CAAC,cAAc;AACjB,aAAO;AAAA,IACT;AAEA,WAAO,YAAY,cAAc,IAAI;AAAA,EACvC,GAAG,CAAC,oBAAoB,MAAM,cAAc,MAAM,MAAM,IAAI,CAAC;AAE7D,QAAM,EAAE,SAAS,IAAI,SAAS,EAAE,WAAW,QAAQ,CAAC;AAEpD,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,WAAW,aAAa,IAAI;AAClC,UAAM,SAAS,WAAW,IAAI;AAE9B,WACE,cAAc,UAAU,QAAW,MAAM,KAAK,KAAK,KACnD,cAAc,QAAQ,MAAM,KAAK,KAAK;AAAA,EAE1C,GAAG,CAAC,MAAM,KAAK,MAAM,KAAK,IAAI,CAAC;AAG/B,WAAS,UAAU;AACjB,aAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,EAAE,YAAY,MAAM,cAAc,MAAM;AAAA,IACnD,CAAC;AAED,aAAS,EAAE,MAAM,gCAAgC,SAAS,MAAM,CAAC;AAAA,EACnE;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { endOfMonth, isSameMonth, startOfMonth } from 'date-fns';\nimport { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { formatDate } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useCalendarContext } from './useCalendarContext.js';\nimport { useFocus } from './useFocus.js';\nimport { isTimeframe } from '../../../core/time/helpers.js';\nimport { useCalendarStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport { isOutOfBounds } from '../../../core/time/validation.js';\nimport type { ViewItem } from '../components/CalendarItem.js';\nimport type { UseCalendarItemProps } from '../types/shared-types.js';\n\n/** Custom hook that retrieves properties from the current month. */\nexport function useMonth({ date, itemRef }: UseCalendarItemProps): ViewItem {\n  const { state, dispatch } = useCalendarContext();\n  const configuredTimezone = getTimezone();\n  const value = useCalendarStore((store) => store.calendarValue);\n  const min = useCalendarStore((store) => store.min);\n  const max = useCalendarStore((store) => store.max);\n\n  const intl = useIntl();\n\n  const ariaLabel = useMemo(() => {\n    const formatMessage = intl.formatMessage({\n      defaultMessage: 'Select month',\n      id: 'aRc3KoQgfpti2E9M',\n      description: 'Aria label to add to each month button',\n    });\n    return `${formatMessage} ${formatDate(date, {\n      month: 'long',\n    })}`;\n  }, [intl, date]);\n\n  const isCurrent = useMemo(\n    () => isSameMonth(date, state.today),\n    [date, state.today],\n  );\n\n  const isFocused = useMemo(\n    () => isSameMonth(date, state.activeDate),\n    [date, state.activeDate],\n  );\n\n  const isSelected = useMemo(() => {\n    if (isTimeframe(value, state.type) && value) {\n      const { from, to } = value;\n      const fromDate = from\n        ? new TZDateMini(from.absoluteDate, configuredTimezone)\n        : null;\n      const toDate = to\n        ? new TZDateMini(to.absoluteDate, configuredTimezone)\n        : null;\n\n      return !!(\n        (fromDate && isSameMonth(fromDate, date)) ||\n        (toDate && isSameMonth(toDate, date))\n      );\n    }\n\n    const selectedDate = value\n      ? startOfMonth(new TZDateMini(value.absoluteDate, configuredTimezone))\n      : null;\n\n    if (!selectedDate) {\n      return false;\n    }\n\n    return isSameMonth(selectedDate, date);\n  }, [configuredTimezone, value, state.type, date]);\n\n  const { tabIndex } = useFocus({ isFocused, itemRef });\n\n  const isDisabled = useMemo(() => {\n    const startDay = startOfMonth(date);\n    const endDay = endOfMonth(date);\n\n    return !!(\n      isOutOfBounds(startDay, undefined, max) || isOutOfBounds(endDay, min)\n    );\n  }, [min, max, date]);\n\n  /** Handle click on a month in the month view. */\n  function onClick() {\n    dispatch({\n      type: 'activeDateChange',\n      payload: { activeDate: date, changeToView: 'day' },\n    });\n\n    dispatch({ type: 'shouldUpdateFocusFromKeydown', payload: false });\n  }\n\n  return {\n    ariaLabel,\n    tabIndex,\n    isCurrent,\n    isSelected,\n    isDisabled,\n    onClick,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAAY,aAAa,oBAAoB;AACtD,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAE5B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAKvB,SAAS,SAAS,EAAE,MAAM,QAAQ,GAAmC;AAC1E,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB;AAC/C,QAAM,qBAAqB,YAAY;AACvC,QAAM,QAAQ,iBAAiB,CAAC,UAAU,MAAM,aAAa;AAC7D,QAAM,MAAM,iBAAiB,CAAC,UAAU,MAAM,GAAG;AACjD,QAAM,MAAM,iBAAiB,CAAC,UAAU,MAAM,GAAG;AAEjD,QAAM,OAAO,QAAQ;AAErB,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,gBAAgB,KAAK,cAAc;AAAA,MACvC,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AACD,WAAO,GAAG,aAAa,IAAI,WAAW,MAAM;AAAA,MAC1C,OAAO;AAAA,IACT,CAAC,CAAC;AAAA,EACJ,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,YAAY;AAAA,IAChB,MAAM,YAAY,MAAM,MAAM,KAAK;AAAA,IACnC,CAAC,MAAM,MAAM,KAAK;AAAA,EACpB;AAEA,QAAM,YAAY;AAAA,IAChB,MAAM,YAAY,MAAM,MAAM,UAAU;AAAA,IACxC,CAAC,MAAM,MAAM,UAAU;AAAA,EACzB;AAEA,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,YAAY,OAAO,MAAM,IAAI,KAAK,OAAO;AAC3C,YAAM,EAAE,MAAM,GAAG,IAAI;AACrB,YAAM,WAAW,OACb,IAAI,WAAW,KAAK,cAAc,kBAAkB,IACpD;AACJ,YAAM,SAAS,KACX,IAAI,WAAW,GAAG,cAAc,kBAAkB,IAClD;AAEJ,aAAO,CAAC,EACL,YAAY,YAAY,UAAU,IAAI,KACtC,UAAU,YAAY,QAAQ,IAAI;AAAA,IAEvC;AAEA,UAAM,eAAe,QACjB,aAAa,IAAI,WAAW,MAAM,cAAc,kBAAkB,CAAC,IACnE;AAEJ,QAAI,CAAC,cAAc;AACjB,aAAO;AAAA,IACT;AAEA,WAAO,YAAY,cAAc,IAAI;AAAA,EACvC,GAAG,CAAC,oBAAoB,OAAO,MAAM,MAAM,IAAI,CAAC;AAEhD,QAAM,EAAE,SAAS,IAAI,SAAS,EAAE,WAAW,QAAQ,CAAC;AAEpD,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,WAAW,aAAa,IAAI;AAClC,UAAM,SAAS,WAAW,IAAI;AAE9B,WAAO,CAAC,EACN,cAAc,UAAU,QAAW,GAAG,KAAK,cAAc,QAAQ,GAAG;AAAA,EAExE,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC;AAGnB,WAAS,UAAU;AACjB,aAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,EAAE,YAAY,MAAM,cAAc,MAAM;AAAA,IACnD,CAAC;AAED,aAAS,EAAE,MAAM,gCAAgC,SAAS,MAAM,CAAC;AAAA,EACnE;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/forms/calendar/hooks/useSelectMonth.js

@@ -2,13 +2,15 @@ import { TZDateMini } from "@date-fns/tz";
 import { getDaysInMonth } from "date-fns";
 import { useMemo } from "react";
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
+import { isTimeframe } from "../../../core/time/helpers.js";
+import { useCalendarStore } from "../../../core/time/timeframeStore/useTimeframeStore.js";
 import { useCalendarContext } from "./useCalendarContext.js";
-import { isTimeframe } from "../../forms-core/time/types.js";
 import { NUMBER_OF_MONTHS } from "../types/calendarConfiguration.js";
 function useSelectMonth() {
   const { state } = useCalendarContext();
   const configuredTimezone = getTimezone();
-  const selectedISODate = isTimeframe(state.selectedDate, state.type) ? state.selectedDate.from?.absoluteDate : state.selectedDate?.absoluteDate;
+  const value = useCalendarStore((store) => store.calendarValue);
+  const selectedISODate = isTimeframe(value, state.type) ? value?.from?.absoluteDate : value?.absoluteDate;
   const selectedDate = useMemo(
     () => new TZDateMini(
       selectedISODate || state.activeDate.toISOString(),

package/esm/forms/calendar/hooks/useSelectMonth.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/hooks/useSelectMonth.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { getDaysInMonth } from 'date-fns';\nimport { useMemo } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useCalendarContext } from './useCalendarContext.js';\nimport { isTimeframe } from '../../forms-core/time/types.js';\nimport type { SelectMonthViewItems } from '../Calendar.types.js';\nimport { NUMBER_OF_MONTHS } from '../types/calendarConfiguration.js';\n\n/** Custom hook used for the month selection view. */\nexport function useSelectMonth(): SelectMonthViewItems {\n  const { state } = useCalendarContext();\n  const configuredTimezone = getTimezone();\n\n  const selectedISODate = isTimeframe(state.selectedDate, state.type)\n    ? state.selectedDate.from?.absoluteDate\n    : state.selectedDate?.absoluteDate;\n\n  const selectedDate = useMemo(\n    () =>\n      new TZDateMini(\n        selectedISODate || state.activeDate.toISOString(),\n        configuredTimezone,\n      ),\n    [selectedISODate, state.activeDate, configuredTimezone],\n  );\n\n  /** Get months to display. */\n  const months = useMemo(\n    () =>\n      Array(NUMBER_OF_MONTHS)\n        .fill(0)\n        .map((_, index) => {\n          const activeYear = new TZDateMini(\n            state.activeDate,\n            configuredTimezone,\n          ).getFullYear();\n\n          const newDate = new TZDateMini(\n            0,\n            index,\n            // Depending on the selected day/active day, the month might change to the next\n            // month if there are fewer days in the month with current index.\n            // e.g. active day = 31, current index = 1 (February)\n            // --> new TZDateMini would end up being March 3 and we would get March twice in list of months\n            // To avoid this, we have to clamp the day to the maximum number of days in given month\n            Math.min(\n              getDaysInMonth(\n                new TZDateMini(activeYear, index, 1, configuredTimezone),\n              ),\n              selectedDate.getDate(),\n            ),\n            configuredTimezone,\n          );\n          // Ensure the correct year is set, as new TZDateMini(3) defaults to the year 1903\n          newDate.setFullYear(activeYear);\n\n          return newDate;\n        }),\n    [state.activeDate, configuredTimezone, selectedDate],\n  );\n\n  return {\n    months,\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAExB,SAAS,mBAAmB;AAE5B,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAE5B,SAAS,wBAAwB;AAG1B,SAAS,iBAAuC;AACrD,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,qBAAqB,YAAY;AAEvC,QAAM,kBAAkB,YAAY,MAAM,cAAc,MAAM,IAAI,IAC9D,MAAM,aAAa,MAAM,eACzB,MAAM,cAAc;AAExB,QAAM,eAAe;AAAA,IACnB,MACE,IAAI;AAAA,MACF,mBAAmB,MAAM,WAAW,YAAY;AAAA,MAChD;AAAA,IACF;AAAA,IACF,CAAC,iBAAiB,MAAM,YAAY,kBAAkB;AAAA,EACxD;AAGA,QAAM,SAAS;AAAA,IACb,MACE,MAAM,gBAAgB,EACnB,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,UAAU;AACjB,YAAM,aAAa,IAAI;AAAA,QACrB,MAAM;AAAA,QACN;AAAA,MACF,EAAE,YAAY;AAEd,YAAM,UAAU,IAAI;AAAA,QAClB;AAAA,QACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMA,KAAK;AAAA,UACH;AAAA,YACE,IAAI,WAAW,YAAY,OAAO,GAAG,kBAAkB;AAAA,UACzD;AAAA,UACA,aAAa,QAAQ;AAAA,QACvB;AAAA,QACA;AAAA,MACF;AAEA,cAAQ,YAAY,UAAU;AAE9B,aAAO;AAAA,IACT,CAAC;AAAA,IACL,CAAC,MAAM,YAAY,oBAAoB,YAAY;AAAA,EACrD;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { getDaysInMonth } from 'date-fns';\nimport { useMemo } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { isTimeframe } from '../../../core/time/helpers.js';\nimport { useCalendarStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { SelectMonthViewItems } from '../Calendar.types.js';\nimport { useCalendarContext } from './useCalendarContext.js';\nimport { NUMBER_OF_MONTHS } from '../types/calendarConfiguration.js';\n\n/** Custom hook used for the month selection view. */\nexport function useSelectMonth(): SelectMonthViewItems {\n  const { state } = useCalendarContext();\n  const configuredTimezone = getTimezone();\n  const value = useCalendarStore((store) => store.calendarValue);\n\n  const selectedISODate = isTimeframe(value, state.type)\n    ? value?.from?.absoluteDate\n    : value?.absoluteDate;\n\n  const selectedDate = useMemo(\n    () =>\n      new TZDateMini(\n        selectedISODate || state.activeDate.toISOString(),\n        configuredTimezone,\n      ),\n    [selectedISODate, state.activeDate, configuredTimezone],\n  );\n\n  /** Get months to display. */\n  const months = useMemo(\n    () =>\n      Array(NUMBER_OF_MONTHS)\n        .fill(0)\n        .map((_, index) => {\n          const activeYear = new TZDateMini(\n            state.activeDate,\n            configuredTimezone,\n          ).getFullYear();\n\n          const newDate = new TZDateMini(\n            0,\n            index,\n            // Depending on the selected day/active day, the month might change to the next\n            // month if there are fewer days in the month with current index.\n            // e.g. active day = 31, current index = 1 (February)\n            // --> new TZDateMini would end up being March 3 and we would get March twice in list of months\n            // To avoid this, we have to clamp the day to the maximum number of days in given month\n            Math.min(\n              getDaysInMonth(\n                new TZDateMini(activeYear, index, 1, configuredTimezone),\n              ),\n              selectedDate.getDate(),\n            ),\n            configuredTimezone,\n          );\n          // Ensure the correct year is set, as new TZDateMini(3) defaults to the year 1903\n          newDate.setFullYear(activeYear);\n\n          return newDate;\n        }),\n    [state.activeDate, configuredTimezone, selectedDate],\n  );\n\n  return {\n    months,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAExB,SAAS,mBAAmB;AAE5B,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAEjC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AAG1B,SAAS,iBAAuC;AACrD,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,qBAAqB,YAAY;AACvC,QAAM,QAAQ,iBAAiB,CAAC,UAAU,MAAM,aAAa;AAE7D,QAAM,kBAAkB,YAAY,OAAO,MAAM,IAAI,IACjD,OAAO,MAAM,eACb,OAAO;AAEX,QAAM,eAAe;AAAA,IACnB,MACE,IAAI;AAAA,MACF,mBAAmB,MAAM,WAAW,YAAY;AAAA,MAChD;AAAA,IACF;AAAA,IACF,CAAC,iBAAiB,MAAM,YAAY,kBAAkB;AAAA,EACxD;AAGA,QAAM,SAAS;AAAA,IACb,MACE,MAAM,gBAAgB,EACnB,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,UAAU;AACjB,YAAM,aAAa,IAAI;AAAA,QACrB,MAAM;AAAA,QACN;AAAA,MACF,EAAE,YAAY;AAEd,YAAM,UAAU,IAAI;AAAA,QAClB;AAAA,QACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMA,KAAK;AAAA,UACH;AAAA,YACE,IAAI,WAAW,YAAY,OAAO,GAAG,kBAAkB;AAAA,UACzD;AAAA,UACA,aAAa,QAAQ;AAAA,QACvB;AAAA,QACA;AAAA,MACF;AAEA,cAAQ,YAAY,UAAU;AAE9B,aAAO;AAAA,IACT,CAAC;AAAA,IACL,CAAC,MAAM,YAAY,oBAAoB,YAAY;AAAA,EACrD;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/forms/calendar/hooks/useSelectYear.js

@@ -3,14 +3,16 @@ import { addYears, eachYearOfInterval } from "date-fns";
 import { useMemo, useRef, useState } from "react";
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
 import { useCalendarContext } from "./useCalendarContext.js";
-import { isTimeframe } from "../../forms-core/time/types.js";
+import { isTimeframe } from "../../../core/time/helpers.js";
+import { useCalendarStore } from "../../../core/time/timeframeStore/useTimeframeStore.js";
 import {
   NUMBER_OF_YEARS,
   YEARS_RANGE_START_OFFSET
 } from "../types/calendarConfiguration.js";
 function useSelectYear() {
   const { state } = useCalendarContext();
-  const selectedISODate = isTimeframe(state.selectedDate, state.type) ? state.selectedDate.from?.absoluteDate : state.selectedDate?.absoluteDate;
+  const value = useCalendarStore((store) => store.calendarValue);
+  const selectedISODate = isTimeframe(value, state.type) ? value?.from?.absoluteDate : value?.absoluteDate;
   const configuredTimezone = getTimezone();
   const selectedDate = useMemo(
     () => selectedISODate ? new TZDateMini(selectedISODate, configuredTimezone) : void 0,

package/esm/forms/calendar/hooks/useSelectYear.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/hooks/useSelectYear.ts"],
-  "sourcesContent": ["import { TZDate, TZDateMini } from '@date-fns/tz';\nimport { addYears, eachYearOfInterval } from 'date-fns';\nimport { useMemo, useRef, useState } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useCalendarContext } from './useCalendarContext.js';\nimport { isTimeframe } from '../../forms-core/time/types.js';\nimport {\n  NUMBER_OF_YEARS,\n  YEARS_RANGE_START_OFFSET,\n} from '../types/calendarConfiguration.js';\n\nexport interface SelectYearViewRange {\n  rangeStart: TZDate;\n  rangeEnd: TZDate;\n}\n\nexport interface SelectYearViewItems {\n  years: TZDate[];\n}\n\n/** Custom hook used for the year selection view. */\nexport function useSelectYear(): SelectYearViewRange & SelectYearViewItems {\n  const { state } = useCalendarContext();\n  const selectedISODate = isTimeframe(state.selectedDate, state.type)\n    ? state.selectedDate.from?.absoluteDate\n    : state.selectedDate?.absoluteDate;\n  const configuredTimezone = getTimezone();\n\n  const selectedDate = useMemo(\n    () =>\n      selectedISODate\n        ? new TZDateMini(selectedISODate, configuredTimezone)\n        : undefined,\n    [configuredTimezone, selectedISODate],\n  );\n\n  const activeYear = state.activeDate.getFullYear();\n\n  const [rangeStart, setRangeStart] = useState<TZDate>(\n    addYears<TZDate, TZDate>(\n      selectedDate || state.activeDate,\n      YEARS_RANGE_START_OFFSET,\n    ),\n  );\n  const [rangeEnd, setRangeEnd] = useState<TZDate>(() =>\n    addYears(rangeStart, NUMBER_OF_YEARS - 1),\n  );\n\n  const initialActiveDate = useRef(state.activeDate);\n\n  const years = useMemo(\n    () =>\n      // don\u00B4t need to return TZDateMini as we have the timezone information in the rangeStart.\n      eachYearOfInterval({\n        start: rangeStart,\n        end: rangeEnd,\n      }).map((year) => {\n        year.setDate(\n          selectedDate?.getDate() || initialActiveDate.current.getDate(),\n        );\n        year.setMonth(\n          selectedDate?.getMonth() || initialActiveDate.current.getMonth(),\n        );\n        return new TZDateMini(year, configuredTimezone);\n      }),\n    [configuredTimezone, rangeEnd, rangeStart, selectedDate],\n  );\n\n  if (activeYear < rangeStart.getFullYear()) {\n    initialActiveDate.current = new TZDateMini(\n      state.activeDate,\n      configuredTimezone,\n    );\n    // Typecast to TZDate since TypeScript doesn't infer addYears return type directly\n    setRangeStart(addYears<TZDate, TZDate>(rangeStart, -NUMBER_OF_YEARS));\n    setRangeEnd(addYears<TZDate, TZDate>(rangeEnd, -NUMBER_OF_YEARS));\n  }\n\n  if (activeYear > rangeEnd.getFullYear()) {\n    initialActiveDate.current = new TZDateMini(\n      state.activeDate,\n      configuredTimezone,\n    );\n    // Typecast to TZDate since TypeScript doesn't infer addYears return type directly\n    setRangeStart(addYears<TZDate, TZDate>(rangeStart, NUMBER_OF_YEARS));\n    setRangeEnd(addYears<TZDate, TZDate>(rangeEnd, NUMBER_OF_YEARS));\n  }\n\n  return {\n    rangeStart,\n    rangeEnd,\n    years,\n  };\n}\n"],
-  "mappings": "AAAA,SAAiB,kBAAkB;AACnC,SAAS,UAAU,0BAA0B;AAC7C,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,SAAS,mBAAmB;AAE5B,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAYA,SAAS,gBAA2D;AACzE,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,kBAAkB,YAAY,MAAM,cAAc,MAAM,IAAI,IAC9D,MAAM,aAAa,MAAM,eACzB,MAAM,cAAc;AACxB,QAAM,qBAAqB,YAAY;AAEvC,QAAM,eAAe;AAAA,IACnB,MACE,kBACI,IAAI,WAAW,iBAAiB,kBAAkB,IAClD;AAAA,IACN,CAAC,oBAAoB,eAAe;AAAA,EACtC;AAEA,QAAM,aAAa,MAAM,WAAW,YAAY;AAEhD,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,MACE,gBAAgB,MAAM;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AACA,QAAM,CAAC,UAAU,WAAW,IAAI;AAAA,IAAiB,MAC/C,SAAS,YAAY,kBAAkB,CAAC;AAAA,EAC1C;AAEA,QAAM,oBAAoB,OAAO,MAAM,UAAU;AAEjD,QAAM,QAAQ;AAAA,IACZ;AAAA;AAAA,MAEE,mBAAmB;AAAA,QACjB,OAAO;AAAA,QACP,KAAK;AAAA,MACP,CAAC,EAAE,IAAI,CAAC,SAAS;AACf,aAAK;AAAA,UACH,cAAc,QAAQ,KAAK,kBAAkB,QAAQ,QAAQ;AAAA,QAC/D;AACA,aAAK;AAAA,UACH,cAAc,SAAS,KAAK,kBAAkB,QAAQ,SAAS;AAAA,QACjE;AACA,eAAO,IAAI,WAAW,MAAM,kBAAkB;AAAA,MAChD,CAAC;AAAA;AAAA,IACH,CAAC,oBAAoB,UAAU,YAAY,YAAY;AAAA,EACzD;AAEA,MAAI,aAAa,WAAW,YAAY,GAAG;AACzC,sBAAkB,UAAU,IAAI;AAAA,MAC9B,MAAM;AAAA,MACN;AAAA,IACF;AAEA,kBAAc,SAAyB,YAAY,CAAC,eAAe,CAAC;AACpE,gBAAY,SAAyB,UAAU,CAAC,eAAe,CAAC;AAAA,EAClE;AAEA,MAAI,aAAa,SAAS,YAAY,GAAG;AACvC,sBAAkB,UAAU,IAAI;AAAA,MAC9B,MAAM;AAAA,MACN;AAAA,IACF;AAEA,kBAAc,SAAyB,YAAY,eAAe,CAAC;AACnE,gBAAY,SAAyB,UAAU,eAAe,CAAC;AAAA,EACjE;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { TZDate, TZDateMini } from '@date-fns/tz';\nimport { addYears, eachYearOfInterval } from 'date-fns';\nimport { useMemo, useRef, useState } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useCalendarContext } from './useCalendarContext.js';\nimport { isTimeframe } from '../../../core/time/helpers.js';\nimport { useCalendarStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  NUMBER_OF_YEARS,\n  YEARS_RANGE_START_OFFSET,\n} from '../types/calendarConfiguration.js';\n\nexport interface SelectYearViewRange {\n  rangeStart: TZDate;\n  rangeEnd: TZDate;\n}\n\nexport interface SelectYearViewItems {\n  years: TZDate[];\n}\n\n/** Custom hook used for the year selection view. */\nexport function useSelectYear(): SelectYearViewRange & SelectYearViewItems {\n  const { state } = useCalendarContext();\n  const value = useCalendarStore((store) => store.calendarValue);\n  const selectedISODate = isTimeframe(value, state.type)\n    ? value?.from?.absoluteDate\n    : value?.absoluteDate;\n  const configuredTimezone = getTimezone();\n\n  const selectedDate = useMemo(\n    () =>\n      selectedISODate\n        ? new TZDateMini(selectedISODate, configuredTimezone)\n        : undefined,\n    [configuredTimezone, selectedISODate],\n  );\n\n  const activeYear = state.activeDate.getFullYear();\n\n  const [rangeStart, setRangeStart] = useState<TZDate>(\n    addYears<TZDate, TZDate>(\n      selectedDate || state.activeDate,\n      YEARS_RANGE_START_OFFSET,\n    ),\n  );\n  const [rangeEnd, setRangeEnd] = useState<TZDate>(() =>\n    addYears(rangeStart, NUMBER_OF_YEARS - 1),\n  );\n\n  const initialActiveDate = useRef(state.activeDate);\n\n  const years = useMemo(\n    () =>\n      // don\u00B4t need to return TZDateMini as we have the timezone information in the rangeStart.\n      eachYearOfInterval({\n        start: rangeStart,\n        end: rangeEnd,\n      }).map((year) => {\n        year.setDate(\n          selectedDate?.getDate() || initialActiveDate.current.getDate(),\n        );\n        year.setMonth(\n          selectedDate?.getMonth() || initialActiveDate.current.getMonth(),\n        );\n        return new TZDateMini(year, configuredTimezone);\n      }),\n    [configuredTimezone, rangeEnd, rangeStart, selectedDate],\n  );\n\n  if (activeYear < rangeStart.getFullYear()) {\n    initialActiveDate.current = new TZDateMini(\n      state.activeDate,\n      configuredTimezone,\n    );\n    // Typecast to TZDate since TypeScript doesn't infer addYears return type directly\n    setRangeStart(addYears<TZDate, TZDate>(rangeStart, -NUMBER_OF_YEARS));\n    setRangeEnd(addYears<TZDate, TZDate>(rangeEnd, -NUMBER_OF_YEARS));\n  }\n\n  if (activeYear > rangeEnd.getFullYear()) {\n    initialActiveDate.current = new TZDateMini(\n      state.activeDate,\n      configuredTimezone,\n    );\n    // Typecast to TZDate since TypeScript doesn't infer addYears return type directly\n    setRangeStart(addYears<TZDate, TZDate>(rangeStart, NUMBER_OF_YEARS));\n    setRangeEnd(addYears<TZDate, TZDate>(rangeEnd, NUMBER_OF_YEARS));\n  }\n\n  return {\n    rangeStart,\n    rangeEnd,\n    years,\n  };\n}\n"],
+  "mappings": "AAAA,SAAiB,kBAAkB;AACnC,SAAS,UAAU,0BAA0B;AAC7C,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,SAAS,mBAAmB;AAE5B,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAYA,SAAS,gBAA2D;AACzE,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,QAAQ,iBAAiB,CAAC,UAAU,MAAM,aAAa;AAC7D,QAAM,kBAAkB,YAAY,OAAO,MAAM,IAAI,IACjD,OAAO,MAAM,eACb,OAAO;AACX,QAAM,qBAAqB,YAAY;AAEvC,QAAM,eAAe;AAAA,IACnB,MACE,kBACI,IAAI,WAAW,iBAAiB,kBAAkB,IAClD;AAAA,IACN,CAAC,oBAAoB,eAAe;AAAA,EACtC;AAEA,QAAM,aAAa,MAAM,WAAW,YAAY;AAEhD,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,MACE,gBAAgB,MAAM;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AACA,QAAM,CAAC,UAAU,WAAW,IAAI;AAAA,IAAiB,MAC/C,SAAS,YAAY,kBAAkB,CAAC;AAAA,EAC1C;AAEA,QAAM,oBAAoB,OAAO,MAAM,UAAU;AAEjD,QAAM,QAAQ;AAAA,IACZ;AAAA;AAAA,MAEE,mBAAmB;AAAA,QACjB,OAAO;AAAA,QACP,KAAK;AAAA,MACP,CAAC,EAAE,IAAI,CAAC,SAAS;AACf,aAAK;AAAA,UACH,cAAc,QAAQ,KAAK,kBAAkB,QAAQ,QAAQ;AAAA,QAC/D;AACA,aAAK;AAAA,UACH,cAAc,SAAS,KAAK,kBAAkB,QAAQ,SAAS;AAAA,QACjE;AACA,eAAO,IAAI,WAAW,MAAM,kBAAkB;AAAA,MAChD,CAAC;AAAA;AAAA,IACH,CAAC,oBAAoB,UAAU,YAAY,YAAY;AAAA,EACzD;AAEA,MAAI,aAAa,WAAW,YAAY,GAAG;AACzC,sBAAkB,UAAU,IAAI;AAAA,MAC9B,MAAM;AAAA,MACN;AAAA,IACF;AAEA,kBAAc,SAAyB,YAAY,CAAC,eAAe,CAAC;AACpE,gBAAY,SAAyB,UAAU,CAAC,eAAe,CAAC;AAAA,EAClE;AAEA,MAAI,aAAa,SAAS,YAAY,GAAG;AACvC,sBAAkB,UAAU,IAAI;AAAA,MAC9B,MAAM;AAAA,MACN;AAAA,IACF;AAEA,kBAAc,SAAyB,YAAY,eAAe,CAAC;AACnE,gBAAY,SAAyB,UAAU,eAAe,CAAC;AAAA,EACjE;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/forms/calendar/hooks/useYear.js

@@ -5,11 +5,15 @@ import { useIntl } from "react-intl";
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
 import { useCalendarContext } from "./useCalendarContext.js";
 import { useFocus } from "./useFocus.js";
-import { isTimeframe } from "../../forms-core/time/types.js";
-import { isOutOfBounds } from "../state/calendar-validation.js";
+import { isTimeframe } from "../../../core/time/helpers.js";
+import { useCalendarStore } from "../../../core/time/timeframeStore/useTimeframeStore.js";
+import { isOutOfBounds } from "../../../core/time/validation.js";
 function useYear({ date, itemRef }) {
   const { state, dispatch } = useCalendarContext();
   const configuredTimezone = getTimezone();
+  const value = useCalendarStore((store) => store.calendarValue);
+  const min = useCalendarStore((store) => store.min);
+  const max = useCalendarStore((store) => store.max);
   const intl = useIntl();
   const ariaLabel = useMemo(() => {
     const formatMessage = intl.formatMessage({
@@ -29,23 +33,20 @@ function useYear({ date, itemRef }) {
   );
   const isSelected = useMemo(() => {
     const compareYear = date.getFullYear();
-    if (isTimeframe(state.selectedDate, state.type)) {
-      const { from, to } = state.selectedDate;
+    if (isTimeframe(value, state.type) && value) {
+      const { from, to } = value;
       const fromYear = from ? new TZDateMini(from.absoluteDate, configuredTimezone).getFullYear() : null;
       const toYear = to ? new TZDateMini(to.absoluteDate, configuredTimezone).getFullYear() : null;
       return fromYear === compareYear || toYear === compareYear;
     }
-    const selectedYear = state.selectedDate ? new TZDateMini(
-      state.selectedDate.absoluteDate,
-      configuredTimezone
-    ).getFullYear() : null;
+    const selectedYear = value ? new TZDateMini(value.absoluteDate, configuredTimezone).getFullYear() : null;
     return compareYear === selectedYear;
-  }, [configuredTimezone, state.selectedDate, state.type, date]);
+  }, [configuredTimezone, value, state.type, date]);
   const isDisabled = useMemo(() => {
     const startDay = startOfYear(date);
     const endDay = endOfYear(date);
-    return isOutOfBounds(startDay, void 0, state.max?.value) || isOutOfBounds(endDay, state.min?.value);
-  }, [state.min, state.max, date]);
+    return !!(isOutOfBounds(startDay, void 0, max) || isOutOfBounds(endDay, min));
+  }, [min, max, date]);
   const { tabIndex } = useFocus({ isFocused, itemRef });
   function onClick() {
     dispatch({

package/esm/forms/calendar/hooks/useYear.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/hooks/useYear.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { endOfYear, isSameYear, startOfYear } from 'date-fns';\nimport { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useCalendarContext } from './useCalendarContext.js';\nimport { useFocus } from './useFocus.js';\nimport { isTimeframe } from '../../forms-core/time/types.js';\nimport type { ViewItem } from '../components/CalendarItem.js';\nimport { isOutOfBounds } from '../state/calendar-validation.js';\nimport type { UseCalendarItemProps } from '../types/shared-types.js';\n\n/** Custom hook that retrieves properties from the year that is passed in. */\nexport function useYear({ date, itemRef }: UseCalendarItemProps): ViewItem {\n  const { state, dispatch } = useCalendarContext();\n  const configuredTimezone = getTimezone();\n\n  const intl = useIntl();\n\n  const ariaLabel = useMemo(() => {\n    const formatMessage = intl.formatMessage({\n      defaultMessage: 'Select year',\n      id: 'pRBtzsvqzp1/QqAV',\n      description: 'Aria label to add to each year button',\n    });\n\n    return `${formatMessage} ${date.getFullYear().toString()}`;\n  }, [date, intl]);\n\n  const isCurrent = useMemo(\n    () => isSameYear(date, state.today),\n    [date, state.today],\n  );\n\n  const isFocused = useMemo(\n    () => isSameYear(date, state.activeDate),\n    [state.activeDate, date],\n  );\n\n  const isSelected = useMemo(() => {\n    const compareYear = date.getFullYear();\n\n    if (isTimeframe(state.selectedDate, state.type)) {\n      const { from, to } = state.selectedDate;\n\n      const fromYear = from\n        ? new TZDateMini(from.absoluteDate, configuredTimezone).getFullYear()\n        : null;\n      const toYear = to\n        ? new TZDateMini(to.absoluteDate, configuredTimezone).getFullYear()\n        : null;\n\n      return fromYear === compareYear || toYear === compareYear;\n    }\n\n    const selectedYear = state.selectedDate\n      ? new TZDateMini(\n          state.selectedDate.absoluteDate,\n          configuredTimezone,\n        ).getFullYear()\n      : null;\n\n    return compareYear === selectedYear;\n  }, [configuredTimezone, state.selectedDate, state.type, date]);\n\n  const isDisabled = useMemo(() => {\n    const startDay = startOfYear(date);\n    const endDay = endOfYear(date);\n\n    return (\n      isOutOfBounds(startDay, undefined, state.max?.value) ||\n      isOutOfBounds(endDay, state.min?.value)\n    );\n  }, [state.min, state.max, date]);\n\n  const { tabIndex } = useFocus({ isFocused, itemRef });\n\n  /** Handle click on a year in the month view. */\n  function onClick() {\n    dispatch({\n      type: 'activeDateChange',\n      payload: { activeDate: date, changeToView: 'month' },\n    });\n\n    dispatch({ type: 'shouldUpdateFocusFromKeydown', payload: false });\n  }\n\n  return {\n    ariaLabel,\n    tabIndex,\n    isCurrent,\n    isSelected,\n    isDisabled,\n    onClick,\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,WAAW,YAAY,mBAAmB;AACnD,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,SAAS,mBAAmB;AAE5B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAE5B,SAAS,qBAAqB;AAIvB,SAAS,QAAQ,EAAE,MAAM,QAAQ,GAAmC;AACzE,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB;AAC/C,QAAM,qBAAqB,YAAY;AAEvC,QAAM,OAAO,QAAQ;AAErB,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,gBAAgB,KAAK,cAAc;AAAA,MACvC,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AAED,WAAO,GAAG,aAAa,IAAI,KAAK,YAAY,EAAE,SAAS,CAAC;AAAA,EAC1D,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,YAAY;AAAA,IAChB,MAAM,WAAW,MAAM,MAAM,KAAK;AAAA,IAClC,CAAC,MAAM,MAAM,KAAK;AAAA,EACpB;AAEA,QAAM,YAAY;AAAA,IAChB,MAAM,WAAW,MAAM,MAAM,UAAU;AAAA,IACvC,CAAC,MAAM,YAAY,IAAI;AAAA,EACzB;AAEA,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,cAAc,KAAK,YAAY;AAErC,QAAI,YAAY,MAAM,cAAc,MAAM,IAAI,GAAG;AAC/C,YAAM,EAAE,MAAM,GAAG,IAAI,MAAM;AAE3B,YAAM,WAAW,OACb,IAAI,WAAW,KAAK,cAAc,kBAAkB,EAAE,YAAY,IAClE;AACJ,YAAM,SAAS,KACX,IAAI,WAAW,GAAG,cAAc,kBAAkB,EAAE,YAAY,IAChE;AAEJ,aAAO,aAAa,eAAe,WAAW;AAAA,IAChD;AAEA,UAAM,eAAe,MAAM,eACvB,IAAI;AAAA,MACF,MAAM,aAAa;AAAA,MACnB;AAAA,IACF,EAAE,YAAY,IACd;AAEJ,WAAO,gBAAgB;AAAA,EACzB,GAAG,CAAC,oBAAoB,MAAM,cAAc,MAAM,MAAM,IAAI,CAAC;AAE7D,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,WAAW,YAAY,IAAI;AACjC,UAAM,SAAS,UAAU,IAAI;AAE7B,WACE,cAAc,UAAU,QAAW,MAAM,KAAK,KAAK,KACnD,cAAc,QAAQ,MAAM,KAAK,KAAK;AAAA,EAE1C,GAAG,CAAC,MAAM,KAAK,MAAM,KAAK,IAAI,CAAC;AAE/B,QAAM,EAAE,SAAS,IAAI,SAAS,EAAE,WAAW,QAAQ,CAAC;AAGpD,WAAS,UAAU;AACjB,aAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,EAAE,YAAY,MAAM,cAAc,QAAQ;AAAA,IACrD,CAAC;AAED,aAAS,EAAE,MAAM,gCAAgC,SAAS,MAAM,CAAC;AAAA,EACnE;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { endOfYear, isSameYear, startOfYear } from 'date-fns';\nimport { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useCalendarContext } from './useCalendarContext.js';\nimport { useFocus } from './useFocus.js';\nimport { isTimeframe } from '../../../core/time/helpers.js';\nimport { useCalendarStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport { isOutOfBounds } from '../../../core/time/validation.js';\nimport type { ViewItem } from '../components/CalendarItem.js';\nimport type { UseCalendarItemProps } from '../types/shared-types.js';\n\n/** Custom hook that retrieves properties from the year that is passed in. */\nexport function useYear({ date, itemRef }: UseCalendarItemProps): ViewItem {\n  const { state, dispatch } = useCalendarContext();\n  const configuredTimezone = getTimezone();\n\n  const value = useCalendarStore((store) => store.calendarValue);\n  const min = useCalendarStore((store) => store.min);\n  const max = useCalendarStore((store) => store.max);\n\n  const intl = useIntl();\n\n  const ariaLabel = useMemo(() => {\n    const formatMessage = intl.formatMessage({\n      defaultMessage: 'Select year',\n      id: 'pRBtzsvqzp1/QqAV',\n      description: 'Aria label to add to each year button',\n    });\n\n    return `${formatMessage} ${date.getFullYear().toString()}`;\n  }, [date, intl]);\n\n  const isCurrent = useMemo(\n    () => isSameYear(date, state.today),\n    [date, state.today],\n  );\n\n  const isFocused = useMemo(\n    () => isSameYear(date, state.activeDate),\n    [state.activeDate, date],\n  );\n\n  const isSelected = useMemo(() => {\n    const compareYear = date.getFullYear();\n\n    if (isTimeframe(value, state.type) && value) {\n      const { from, to } = value;\n\n      const fromYear = from\n        ? new TZDateMini(from.absoluteDate, configuredTimezone).getFullYear()\n        : null;\n      const toYear = to\n        ? new TZDateMini(to.absoluteDate, configuredTimezone).getFullYear()\n        : null;\n\n      return fromYear === compareYear || toYear === compareYear;\n    }\n\n    const selectedYear = value\n      ? new TZDateMini(value.absoluteDate, configuredTimezone).getFullYear()\n      : null;\n\n    return compareYear === selectedYear;\n  }, [configuredTimezone, value, state.type, date]);\n\n  const isDisabled = useMemo(() => {\n    const startDay = startOfYear(date);\n    const endDay = endOfYear(date);\n\n    return !!(\n      isOutOfBounds(startDay, undefined, max) || isOutOfBounds(endDay, min)\n    );\n  }, [min, max, date]);\n  const { tabIndex } = useFocus({ isFocused, itemRef });\n\n  /** Handle click on a year in the month view. */\n  function onClick() {\n    dispatch({\n      type: 'activeDateChange',\n      payload: { activeDate: date, changeToView: 'month' },\n    });\n\n    dispatch({ type: 'shouldUpdateFocusFromKeydown', payload: false });\n  }\n\n  return {\n    ariaLabel,\n    tabIndex,\n    isCurrent,\n    isSelected,\n    isDisabled,\n    onClick,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,WAAW,YAAY,mBAAmB;AACnD,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,SAAS,mBAAmB;AAE5B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAKvB,SAAS,QAAQ,EAAE,MAAM,QAAQ,GAAmC;AACzE,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB;AAC/C,QAAM,qBAAqB,YAAY;AAEvC,QAAM,QAAQ,iBAAiB,CAAC,UAAU,MAAM,aAAa;AAC7D,QAAM,MAAM,iBAAiB,CAAC,UAAU,MAAM,GAAG;AACjD,QAAM,MAAM,iBAAiB,CAAC,UAAU,MAAM,GAAG;AAEjD,QAAM,OAAO,QAAQ;AAErB,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,gBAAgB,KAAK,cAAc;AAAA,MACvC,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AAED,WAAO,GAAG,aAAa,IAAI,KAAK,YAAY,EAAE,SAAS,CAAC;AAAA,EAC1D,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,YAAY;AAAA,IAChB,MAAM,WAAW,MAAM,MAAM,KAAK;AAAA,IAClC,CAAC,MAAM,MAAM,KAAK;AAAA,EACpB;AAEA,QAAM,YAAY;AAAA,IAChB,MAAM,WAAW,MAAM,MAAM,UAAU;AAAA,IACvC,CAAC,MAAM,YAAY,IAAI;AAAA,EACzB;AAEA,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,cAAc,KAAK,YAAY;AAErC,QAAI,YAAY,OAAO,MAAM,IAAI,KAAK,OAAO;AAC3C,YAAM,EAAE,MAAM,GAAG,IAAI;AAErB,YAAM,WAAW,OACb,IAAI,WAAW,KAAK,cAAc,kBAAkB,EAAE,YAAY,IAClE;AACJ,YAAM,SAAS,KACX,IAAI,WAAW,GAAG,cAAc,kBAAkB,EAAE,YAAY,IAChE;AAEJ,aAAO,aAAa,eAAe,WAAW;AAAA,IAChD;AAEA,UAAM,eAAe,QACjB,IAAI,WAAW,MAAM,cAAc,kBAAkB,EAAE,YAAY,IACnE;AAEJ,WAAO,gBAAgB;AAAA,EACzB,GAAG,CAAC,oBAAoB,OAAO,MAAM,MAAM,IAAI,CAAC;AAEhD,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,WAAW,YAAY,IAAI;AACjC,UAAM,SAAS,UAAU,IAAI;AAE7B,WAAO,CAAC,EACN,cAAc,UAAU,QAAW,GAAG,KAAK,cAAc,QAAQ,GAAG;AAAA,EAExE,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC;AACnB,QAAM,EAAE,SAAS,IAAI,SAAS,EAAE,WAAW,QAAQ,CAAC;AAGpD,WAAS,UAAU;AACjB,aAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,EAAE,YAAY,MAAM,cAAc,QAAQ;AAAA,IACrD,CAAC;AAED,aAAS,EAAE,MAAM,gCAAgC,SAAS,MAAM,CAAC;AAAA,EACnE;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/forms/calendar/state/calendar-state-reducer.js

@@ -1,19 +1,8 @@
 import { TZDateMini } from "@date-fns/tz";
 import { addDays, addMonths, addYears } from "date-fns";
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
-import { validateCalendarSelection } from "./calendar-validation.js";
-import {
-  FormFieldMessagesAction
-} from "../../forms-core/state/formfield-messages-state-reducer.js";
-import { getTimeValueFromSimpleValue } from "../../forms-core/time/helpers.js";
-import { isTimeframe } from "../../forms-core/time/types.js";
-import {
-  getDateFromSelection,
-  getPosition,
-  getWeekStartOrEnd
-} from "../utils/helpers.js";
-function reducer(state, action, handleValidation, onChange, precision) {
-  const configuredTimezone = getTimezone();
+import { getWeekStartOrEnd } from "../utils/helpers.js";
+function reducer(state, action) {
   switch (action.type) {
     case "activeDateChange":
       return {
@@ -21,74 +10,17 @@ function reducer(state, action, handleValidation, onChange, precision) {
         activeDate: action.payload.activeDate,
         currentView: action.payload.changeToView ?? state.currentView
       };
-    case "typeChanged":
-      return { ...state, ...action.payload };
-    case "minMaxChanged": {
-      const internalError = validateCalendarSelection(
-        state.selectedDate,
-        {
-          ...state,
-          min: action.payload.min,
-          max: action.payload.max
-        },
-        handleValidation
-      );
-      return {
-        ...state,
-        min: action.payload.min,
-        max: action.payload.max,
-        errorId: internalError
-      };
-    }
     case "currentViewChange":
       return { ...state, currentView: action.payload };
     case "shouldUpdateFocusFromKeydown":
       return { ...state, shouldUpdateFocusFromKeydown: action.payload };
-    case "selectionChanged": {
-      if (!action.payload) {
-        requestAnimationFrame(() => onChange?.(null));
-        return state;
-      }
-      const newTimeValue = getTimeValueFromSimpleValue(
-        action.payload,
-        state.timeOffset,
-        state.position,
-        void 0,
-        state.min,
-        state.max,
-        precision
-      );
-      const newSelectedDate = getDateFromSelection(
-        state.selectedDate,
-        state.type,
-        newTimeValue,
-        state.position,
-        state.min,
-        state.max,
-        precision
-      );
-      requestAnimationFrame(() => {
-        if (!newSelectedDate) {
-          return onChange?.(null);
-        }
-        if (isTimeframe(newSelectedDate, state.type) && "from" in newSelectedDate && "to" in newSelectedDate) {
-          newSelectedDate.to ??= null;
-          newSelectedDate.from ??= null;
-          return onChange?.(newSelectedDate);
-        }
-        if ("value" in newSelectedDate) {
-          onChange?.(newSelectedDate.value);
-        }
-      });
-      return state;
-    }
     case "navigateCurrentView": {
       let newActiveDate;
       const { amount, unit } = action.payload;
       const affectedScale = unit ?? state.currentView;
       const realAmount = typeof amount === "number" ? amount : getWeekStartOrEnd(amount, state.activeDate);
-      const configuredTimezone2 = getTimezone();
-      const activeDate = new TZDateMini(state.activeDate, configuredTimezone2);
+      const configuredTimezone = getTimezone();
+      const activeDate = new TZDateMini(state.activeDate, configuredTimezone);
       switch (affectedScale) {
         case "day":
           newActiveDate = addDays(activeDate, realAmount);
@@ -105,31 +37,9 @@ function reducer(state, action, handleValidation, onChange, precision) {
         activeDate: newActiveDate
       };
     }
-    case "valueChanged": {
-      const updatedValue = action.payload;
-      const internalError = validateCalendarSelection(
-        updatedValue,
-        state,
-        handleValidation
-      );
-      handleValidation({
-        type: FormFieldMessagesAction.SETISTOUCHED,
-        payload: { isTouched: true }
-      });
-      const activeDate = isTimeframe(updatedValue, state.type) ? updatedValue.to?.absoluteDate || updatedValue.from?.absoluteDate : updatedValue?.absoluteDate;
-      return {
-        ...state,
-        selectedDate: updatedValue,
-        activeDate: new TZDateMini(
-          activeDate ?? state.today.toISOString(),
-          configuredTimezone
-        ),
-        position: getPosition(state.position, updatedValue),
-        errorId: internalError
-      };
-    }
     default:
-      throw new Error("The dispatched action does not exist.");
+      console.warn("The dispatched action does not exist.");
+      return state;
   }
 }
 export {

package/esm/forms/calendar/state/calendar-state-reducer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/state/calendar-state-reducer.ts"],
-  "sourcesContent": ["import { TZDate, TZDateMini } from '@date-fns/tz';\nimport { addDays, addMonths, addYears } from 'date-fns';\nimport { type Dispatch } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { validateCalendarSelection } from './calendar-validation.js';\nimport type { Timeframe } from '../../../core/types/time.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../../forms-core/state/formfield-messages-state-reducer.js';\nimport { getTimeValueFromSimpleValue } from '../../forms-core/time/helpers.js';\nimport { isTimeframe } from '../../forms-core/time/types.js';\nimport type {\n  CalendarReducerAction,\n  CalendarState,\n} from '../types/shared-types.js';\nimport {\n  getDateFromSelection,\n  getPosition,\n  getWeekStartOrEnd,\n} from '../utils/helpers.js';\n\n/** Calendar reducer */\nexport function reducer(\n  state: CalendarState,\n  action: CalendarReducerAction,\n  handleValidation: Dispatch<FormFieldMessagesReducerAction>,\n  onChange?: (date: Timeframe | string | null) => void,\n  precision?: 'minutes' | 'seconds' | 'milliseconds',\n): CalendarState {\n  const configuredTimezone = getTimezone();\n\n  switch (action.type) {\n    case 'activeDateChange':\n      return {\n        ...state,\n        activeDate: action.payload.activeDate,\n        currentView: action.payload.changeToView ?? state.currentView,\n      };\n    case 'typeChanged':\n      return { ...state, ...action.payload };\n    case 'minMaxChanged': {\n      const internalError = validateCalendarSelection(\n        state.selectedDate,\n        {\n          ...state,\n          min: action.payload.min,\n          max: action.payload.max,\n        },\n        handleValidation,\n      );\n\n      return {\n        ...state,\n        min: action.payload.min,\n        max: action.payload.max,\n        errorId: internalError,\n      };\n    }\n    case 'currentViewChange':\n      return { ...state, currentView: action.payload };\n    case 'shouldUpdateFocusFromKeydown':\n      return { ...state, shouldUpdateFocusFromKeydown: action.payload };\n    case 'selectionChanged': {\n      if (!action.payload) {\n        requestAnimationFrame(() => onChange?.(null));\n        return state;\n      }\n\n      const newTimeValue = getTimeValueFromSimpleValue(\n        action.payload,\n        state.timeOffset,\n        state.position,\n        undefined,\n        state.min,\n        state.max,\n        precision,\n      );\n\n      const newSelectedDate = getDateFromSelection(\n        state.selectedDate,\n        state.type,\n        newTimeValue,\n        state.position,\n        state.min,\n        state.max,\n        precision,\n      );\n\n      // The onChange should be triggered after updating the state to prevent a bad setState() call during rendering.\n      requestAnimationFrame(() => {\n        if (!newSelectedDate) {\n          return onChange?.(null);\n        }\n\n        if (\n          isTimeframe(newSelectedDate, state.type) &&\n          'from' in newSelectedDate &&\n          'to' in newSelectedDate\n        ) {\n          // @ts-expect-error TimeValue types are wrong here as they should not handle undefined, but rather null.\n          newSelectedDate.to ??= null;\n          // @ts-expect-error TimeValue types are wrong here as they should not handle undefined, but rather null.\n          newSelectedDate.from ??= null;\n\n          return onChange?.(newSelectedDate as Timeframe);\n        }\n\n        if ('value' in newSelectedDate) {\n          onChange?.(newSelectedDate.value);\n        }\n      });\n\n      return state;\n    }\n    case 'navigateCurrentView': {\n      let newActiveDate: TZDate;\n      const { amount, unit } = action.payload;\n      const affectedScale = unit ?? state.currentView;\n      const realAmount =\n        typeof amount === 'number'\n          ? amount\n          : getWeekStartOrEnd(amount, state.activeDate);\n\n      const configuredTimezone = getTimezone();\n      const activeDate = new TZDateMini(state.activeDate, configuredTimezone);\n\n      switch (affectedScale) {\n        case 'day':\n          newActiveDate = addDays(activeDate, realAmount);\n          break;\n        case 'month':\n          newActiveDate = addMonths(activeDate, realAmount);\n          break;\n        case 'year':\n          newActiveDate = addYears(activeDate, realAmount);\n          break;\n      }\n\n      return {\n        ...state,\n        activeDate: newActiveDate,\n      };\n    }\n    case 'valueChanged': {\n      const updatedValue = action.payload;\n\n      const internalError = validateCalendarSelection(\n        updatedValue,\n        state,\n        handleValidation,\n      );\n\n      handleValidation({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n\n      const activeDate = isTimeframe(updatedValue, state.type)\n        ? updatedValue.to?.absoluteDate || updatedValue.from?.absoluteDate\n        : updatedValue?.absoluteDate;\n\n      return {\n        ...state,\n        selectedDate: updatedValue,\n        activeDate: new TZDateMini(\n          activeDate ?? state.today.toISOString(),\n          configuredTimezone,\n        ),\n        position: getPosition(state.position, updatedValue),\n        errorId: internalError,\n      };\n    }\n    default:\n      // Should never happen\n      throw new Error('The dispatched action does not exist.');\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["configuredTimezone"]
+  "sourcesContent": ["import { TZDate, TZDateMini } from '@date-fns/tz';\nimport { addDays, addMonths, addYears } from 'date-fns';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport type {\n  CalendarReducerAction,\n  CalendarState,\n} from '../types/shared-types.js';\nimport { getWeekStartOrEnd } from '../utils/helpers.js';\n\n/** Calendar reducer */\nexport function reducer(\n  state: CalendarState,\n  action: CalendarReducerAction,\n): CalendarState {\n  switch (action.type) {\n    case 'activeDateChange':\n      return {\n        ...state,\n        activeDate: action.payload.activeDate,\n        currentView: action.payload.changeToView ?? state.currentView,\n      };\n    case 'currentViewChange':\n      return { ...state, currentView: action.payload };\n    case 'shouldUpdateFocusFromKeydown':\n      return { ...state, shouldUpdateFocusFromKeydown: action.payload };\n    case 'navigateCurrentView': {\n      let newActiveDate: TZDate;\n      const { amount, unit } = action.payload;\n      const affectedScale = unit ?? state.currentView;\n      const realAmount =\n        typeof amount === 'number'\n          ? amount\n          : getWeekStartOrEnd(amount, state.activeDate);\n\n      const configuredTimezone = getTimezone();\n      const activeDate = new TZDateMini(state.activeDate, configuredTimezone);\n\n      switch (affectedScale) {\n        case 'day':\n          newActiveDate = addDays(activeDate, realAmount);\n          break;\n        case 'month':\n          newActiveDate = addMonths(activeDate, realAmount);\n          break;\n        case 'year':\n          newActiveDate = addYears(activeDate, realAmount);\n          break;\n      }\n\n      return {\n        ...state,\n        activeDate: newActiveDate,\n      };\n    }\n    default:\n      // Should never happen\n      // eslint-disable-next-line no-console\n      console.warn('The dispatched action does not exist.');\n      return state;\n  }\n}\n"],
+  "mappings": "AAAA,SAAiB,kBAAkB;AACnC,SAAS,SAAS,WAAW,gBAAgB;AAE7C,SAAS,mBAAmB;AAM5B,SAAS,yBAAyB;AAG3B,SAAS,QACd,OACA,QACe;AACf,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,YAAY,OAAO,QAAQ;AAAA,QAC3B,aAAa,OAAO,QAAQ,gBAAgB,MAAM;AAAA,MACpD;AAAA,IACF,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,aAAa,OAAO,QAAQ;AAAA,IACjD,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,8BAA8B,OAAO,QAAQ;AAAA,IAClE,KAAK,uBAAuB;AAC1B,UAAI;AACJ,YAAM,EAAE,QAAQ,KAAK,IAAI,OAAO;AAChC,YAAM,gBAAgB,QAAQ,MAAM;AACpC,YAAM,aACJ,OAAO,WAAW,WACd,SACA,kBAAkB,QAAQ,MAAM,UAAU;AAEhD,YAAM,qBAAqB,YAAY;AACvC,YAAM,aAAa,IAAI,WAAW,MAAM,YAAY,kBAAkB;AAEtE,cAAQ,eAAe;AAAA,QACrB,KAAK;AACH,0BAAgB,QAAQ,YAAY,UAAU;AAC9C;AAAA,QACF,KAAK;AACH,0BAAgB,UAAU,YAAY,UAAU;AAChD;AAAA,QACF,KAAK;AACH,0BAAgB,SAAS,YAAY,UAAU;AAC/C;AAAA,MACJ;AAEA,aAAO;AAAA,QACL,GAAG;AAAA,QACH,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA;AAGE,cAAQ,KAAK,uCAAuC;AACpD,aAAO;AAAA,EACX;AACF;",
+  "names": []
 }

package/esm/forms/calendar/types/calendarConfiguration.js

@@ -9,7 +9,6 @@ const NUMBER_OF_YEAR_ROWS = 6;
 const COLUMNS_GAP = Spacings.Size4;
 const NUMBER_OF_YEARS = NUMBER_OF_YEAR_ROWS * 4;
 const YEARS_RANGE_START_OFFSET = -5;
-const ONE_DAY_IN_MILLISECONDS = 1e3 * 60 * 60 * 24;
 export {
   COLUMNS_GAP,
   NUMBER_OF_MONTHS,
@@ -20,7 +19,6 @@ export {
   NUMBER_OF_YEARS,
   NUMBER_OF_YEARS_PER_ROW,
   NUMBER_OF_YEAR_ROWS,
-  ONE_DAY_IN_MILLISECONDS,
   YEARS_RANGE_START_OFFSET
 };
 //# sourceMappingURL=calendarConfiguration.js.map

package/esm/forms/calendar/types/calendarConfiguration.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/types/calendarConfiguration.ts"],
-  "sourcesContent": ["import Spacings from '@dynatrace/strato-design-tokens/spacings';\n\n/* Constants for rendering the calendar view */\nexport const NUMBER_OF_WEEKDAYS = 7;\nexport const NUMBER_OF_MONTHS_PER_ROW = 3;\nexport const NUMBER_OF_YEARS_PER_ROW = 4;\nexport const NUMBER_OF_MONTHS = 12;\n// The calendar uses a fixed height to avoid layout jumps, with a maximum of 6 rows.\nexport const NUMBER_OF_WEEK_ROWS = 6;\nexport const NUMBER_OF_MONTH_ROWS = 4;\nexport const NUMBER_OF_YEAR_ROWS = 6;\nexport const COLUMNS_GAP = Spacings.Size4;\n/**\n * The view for switching the current year should use the same amount of rows as\n * the date view, but only 4 columns. This means years displayed = NUMBER_OF_YEAR_ROWS * 4\n */\nexport const NUMBER_OF_YEARS = NUMBER_OF_YEAR_ROWS * 4;\n/** The list of years should initially start at the current year - offset. */\nexport const YEARS_RANGE_START_OFFSET = -5;\n/** Number of milliseconds in one day. */\nexport const ONE_DAY_IN_MILLISECONDS = 1000 * 60 * 60 * 24;\n\n/**\n * @internal\n */\nexport type CalendarType = 'single' | 'range';\n"],
-  "mappings": "AAAA,OAAO,cAAc;AAGd,MAAM,qBAAqB;AAC3B,MAAM,2BAA2B;AACjC,MAAM,0BAA0B;AAChC,MAAM,mBAAmB;AAEzB,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAC5B,MAAM,cAAc,SAAS;AAK7B,MAAM,kBAAkB,sBAAsB;AAE9C,MAAM,2BAA2B;AAEjC,MAAM,0BAA0B,MAAO,KAAK,KAAK;",
+  "sourcesContent": ["import Spacings from '@dynatrace/strato-design-tokens/spacings';\n\n/* Constants for rendering the calendar view */\nexport const NUMBER_OF_WEEKDAYS = 7;\nexport const NUMBER_OF_MONTHS_PER_ROW = 3;\nexport const NUMBER_OF_YEARS_PER_ROW = 4;\nexport const NUMBER_OF_MONTHS = 12;\n// The calendar uses a fixed height to avoid layout jumps, with a maximum of 6 rows.\nexport const NUMBER_OF_WEEK_ROWS = 6;\nexport const NUMBER_OF_MONTH_ROWS = 4;\nexport const NUMBER_OF_YEAR_ROWS = 6;\nexport const COLUMNS_GAP = Spacings.Size4;\n/**\n * The view for switching the current year should use the same amount of rows as\n * the date view, but only 4 columns. This means years displayed = NUMBER_OF_YEAR_ROWS * 4\n */\nexport const NUMBER_OF_YEARS = NUMBER_OF_YEAR_ROWS * 4;\n/** The list of years should initially start at the current year - offset. */\nexport const YEARS_RANGE_START_OFFSET = -5;\n/**\n * @internal\n */\nexport type CalendarType = 'single' | 'range';\n"],
+  "mappings": "AAAA,OAAO,cAAc;AAGd,MAAM,qBAAqB;AAC3B,MAAM,2BAA2B;AACjC,MAAM,0BAA0B;AAChC,MAAM,mBAAmB;AAEzB,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAC5B,MAAM,cAAc,SAAS;AAK7B,MAAM,kBAAkB,sBAAsB;AAE9C,MAAM,2BAA2B;",
   "names": []
 }