@dynatrace/strato-components 3.2.0 → 3.3.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-picker/hooks/useDateTimeFormat.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  addHours,\n  getDaysInMonth,\n  setDate,\n  setHours,\n  setMilliseconds,\n  setMinutes,\n  setMonth,\n  setSeconds,\n  setYear,\n  startOfDay,\n} from 'date-fns';\nimport { useCallback, useMemo } from 'react';\nimport type { FormatDateOptions } from 'react-intl';\nimport { createIntl } from 'react-intl';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport {\n  getDayPeriodValues,\n  getSafeRegionalFormat,\n} from '../../forms-core/time/helpers.js';\nimport type { DateTimePickerProps } from '../types.js';\nimport { intlCache } from '../utils/intl-cache.js';\n\nconst INVALID_DATE = new TZDateMini('Invalid');\n\n/** Trim any spaces inside a string. */\nfunction trimSpace(str: string) {\n  return str.replace(/\\s+/g, '');\n}\n\n// TODO: Use the newly introduced _useDateTimeMessages hook and avoid duplication\n/** Provides functions to convert a date object to its parts and vice versa. */\nexport function useDateTimeFormat(\n  type: DateTimePickerProps['type'] = 'datetime',\n  precision: DateTimePickerProps['precision'] = 'minutes',\n) {\n  const regionUserSetting = getSafeRegionalFormat();\n  const timezoneUserSetting = getTimezone();\n  const dayPeriodValues = useMemo(() => getDayPeriodValues(), []);\n\n  // Create intl object based on current user settings\n  const { timeZone, formatDateToParts } = useMemo(\n    () =>\n      createIntl(\n        { locale: regionUserSetting, timeZone: timezoneUserSetting },\n        intlCache,\n      ),\n    [regionUserSetting, timezoneUserSetting],\n  );\n\n  // Formatting rules for given type and precision combination.\n  const format = useMemo(() => {\n    const options: FormatDateOptions = {};\n    switch (type) {\n      case 'date':\n        options['year'] = 'numeric';\n        options['month'] = '2-digit';\n        options['day'] = '2-digit';\n        return options; // Return config and ignore precision prop if only the date is shown.\n      case 'datetime':\n        options['year'] = 'numeric';\n        options['month'] = '2-digit';\n        options['day'] = '2-digit';\n        options['hour'] = '2-digit';\n        options['minute'] = '2-digit';\n        break;\n      case 'time':\n        options['hour'] = 'numeric';\n        options['minute'] = '2-digit';\n        break;\n    }\n\n    switch (precision) {\n      case 'seconds':\n        options['second'] = '2-digit';\n        break;\n      case 'milliseconds':\n        options['second'] = '2-digit';\n        options['fractionalSecondDigits'] = 3;\n        break;\n    }\n\n    return options;\n  }, [type, precision]);\n\n  /**\n   * Convert a date object to its parts for the configured format.\n   * Part values are always zoned and based on the configured timezone.\n   */\n  const toParts = useCallback(\n    (date: Date) => formatDateToParts(date, format),\n    [format, formatDateToParts],\n  );\n\n  /** Convert parts to a UTC date object.  */\n  const toDateTime = useCallback(\n    (parts: Intl.DateTimeFormatPart[]) => {\n      // every non literal part must be empty\n      const isEmpty = !parts.some(\n        ({ type, value }) => type !== 'literal' && value !== '',\n      );\n\n      if (isEmpty) {\n        return null;\n      }\n\n      // Calculate max nrOfDays for given year and month.\n      const year = parts.find((p) => p.type === 'year')?.value;\n      const month = parts.find((p) => p.type === 'month')?.value;\n      const day = parts.find((p) => p.type === 'day')?.value;\n      const maxNrOfDays =\n        year !== undefined && month !== undefined\n          ? getDaysInMonth(\n              new TZDateMini(\n                parseInt(year),\n                parseInt(month) - 1,\n                timeZone ?? 'UTC',\n              ),\n            )\n          : 31;\n\n      // creates an initial date at the start of the current day\n      const current = TZDateMini.tz(timeZone ?? 'UTC');\n      // take year from parts or the current year\n      const yearValue = year ? parseInt(year) : current.getFullYear();\n      // take month from parts or the current month\n      const monthValue = month ? parseInt(month) - 1 : current.getMonth();\n      // take day from parts or the current day\n      const dayValue = day ? parseInt(day) : current.getDate();\n      const initialDate = startOfDay(\n        new TZDateMini(yearValue, monthValue, dayValue, timeZone),\n      );\n\n      const dayPeriod = parts.find((part) => part.type === 'dayPeriod');\n\n      const date = parts.reduce((date: Date, part) => {\n        const intValue = parseInt(part.value);\n        switch (part.type) {\n          case 'year':\n            // In the Japanese region, the date format is YYYY.MM.DD, and setYear(date, 0) is called first.\n            // If a leading 0 is entered, the initialDate becomes '1899-12-31T23:00:00Z'.\n            // This can cause the date to underflow to '-000001-12-31', resulting in invalid dates.\n            if (intValue === 0) {\n              return INVALID_DATE;\n            }\n            return setYear(date, intValue);\n          case 'month':\n            // setMonth interprets the leading 0 as December of the previous year.\n            if (intValue === 0) {\n              return INVALID_DATE;\n            }\n            return setMonth(date, intValue - 1);\n          case 'day':\n            // setDay interprets the leading 0 as the 31st of the previous month.\n            if (intValue > maxNrOfDays || intValue === 0) {\n              return INVALID_DATE;\n            }\n            return setDate(date, intValue);\n          case 'hour':\n            if (dayPeriod) {\n              // We handle the day period together with the hours as the day period can be defined\n              // before or after the hours in different languages. To ensure a proper handling of\n              // the hours together with day periods we do this together.\n              date = setHours(date, intValue % 12); // Treat 12 as 0 in 12h notation.\n              //Some locales do have a space in the day period, e.g. 'a. m.' or 'p. m.'. To compare them we trim the spaces.\n              const dayPeriodValue = trimSpace(dayPeriod.value);\n\n              if (\n                dayPeriodValue === trimSpace(dayPeriodValues[1]) ||\n                dayPeriodValue === 'PM'\n              ) {\n                date = addHours(date, 12); // If the day period is in the afternoon add 12 hours.\n              } else if (\n                dayPeriodValue !== trimSpace(dayPeriodValues[0]) &&\n                dayPeriodValue !== 'AM'\n              ) {\n                date = INVALID_DATE; // If the day period doesn't match AM or PM (in any locale), we treat it as invalid date.\n              }\n              return date;\n            }\n\n            return setHours(date, intValue);\n          case 'minute':\n            return setMinutes(date, intValue);\n          case 'second':\n            return setSeconds(date, intValue);\n          case 'fractionalSecond':\n            return setMilliseconds(date, intValue);\n          default:\n            // Ignore time literals and other part types.\n            return date;\n        }\n        // Already set the month and year of the new date to the month selected to avoid issues when setting the day.\n        // If in the current locale, the date format is e.g. <day><month><year>, setting the day may shift to the next\n        // month if the current month has less days.\n        // e.g.\n        //    current month = April\n        //    selected day = 31\n        //    setDate(31) would shift to May 1, since April only has 30 days\n        // FIXME\n        // In the 'should not close the overlay when the input is blurred' unit test, for some reason in the 'to' input,\n        // the month spin button 'onChange' is triggered when typing '1', even though spin buttons should not even be\n        // rendered. The year fallback is to avoid errors generating the new date in this case ('-01-01' is not supported).\n        // Doesn't happen in the browser, but may be some state updates somewhere that could cause issues at some point.\n      }, initialDate);\n\n      return date;\n    },\n    [timeZone, dayPeriodValues],\n  );\n\n  // provide empty parts for null value in current datetime format\n  const emptyParts = useMemo(\n    () =>\n      toParts(TZDateMini.tz(timeZone ?? 'UTC')).map(({ type, value }) => {\n        return { type, value: type === 'literal' ? value : '' };\n      }),\n    [toParts, timeZone],\n  );\n\n  return { format, toParts, toDateTime, emptyParts };\n}\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa,eAAe;AAErC,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAE5B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iBAAiB;AAE1B,MAAM,eAAe,IAAI,WAAW,SAAS;AAG7C,SAAS,UAAU,KAAa;AAC9B,SAAO,IAAI,QAAQ,QAAQ,EAAE;AAC/B;AAIO,SAAS,kBACd,OAAoC,YACpC,YAA8C,WAC9C;AACA,QAAM,oBAAoB,sBAAsB;AAChD,QAAM,sBAAsB,YAAY;AACxC,QAAM,kBAAkB,QAAQ,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAG9D,QAAM,EAAE,UAAU,kBAAkB,IAAI;AAAA,IACtC,MACE;AAAA,MACE,EAAE,QAAQ,mBAAmB,UAAU,oBAAoB;AAAA,MAC3D;AAAA,IACF;AAAA,IACF,CAAC,mBAAmB,mBAAmB;AAAA,EACzC;AAGA,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,UAA6B,CAAC;AACpC,YAAQ,MAAM;AAAA,MACZ,KAAK;AACH,gBAAQ,MAAM,IAAI;AAClB,gBAAQ,OAAO,IAAI;AACnB,gBAAQ,KAAK,IAAI;AACjB,eAAO;AAAA;AAAA,MACT,KAAK;AACH,gBAAQ,MAAM,IAAI;AAClB,gBAAQ,OAAO,IAAI;AACnB,gBAAQ,KAAK,IAAI;AACjB,gBAAQ,MAAM,IAAI;AAClB,gBAAQ,QAAQ,IAAI;AACpB;AAAA,MACF,KAAK;AACH,gBAAQ,MAAM,IAAI;AAClB,gBAAQ,QAAQ,IAAI;AACpB;AAAA,IACJ;AAEA,YAAQ,WAAW;AAAA,MACjB,KAAK;AACH,gBAAQ,QAAQ,IAAI;AACpB;AAAA,MACF,KAAK;AACH,gBAAQ,QAAQ,IAAI;AACpB,gBAAQ,wBAAwB,IAAI;AACpC;AAAA,IACJ;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,SAAS,CAAC;AAMpB,QAAM,UAAU;AAAA,IACd,CAAC,SAAe,kBAAkB,MAAM,MAAM;AAAA,IAC9C,CAAC,QAAQ,iBAAiB;AAAA,EAC5B;AAGA,QAAM,aAAa;AAAA,IACjB,CAAC,UAAqC;AAEpC,YAAM,UAAU,CAAC,MAAM;AAAA,QACrB,CAAC,EAAE,MAAAA,OAAM,MAAM,MAAMA,UAAS,aAAa,UAAU;AAAA,MACvD;AAEA,UAAI,SAAS;AACX,eAAO;AAAA,MACT;AAGA,YAAM,OAAO,MAAM,KAAK,CAAC,MAAM,EAAE,SAAS,MAAM,GAAG;AACnD,YAAM,QAAQ,MAAM,KAAK,CAAC,MAAM,EAAE,SAAS,OAAO,GAAG;AACrD,YAAM,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,SAAS,KAAK,GAAG;AACjD,YAAM,cACJ,SAAS,UAAa,UAAU,SAC5B;AAAA,QACE,IAAI;AAAA,UACF,SAAS,IAAI;AAAA,UACb,SAAS,KAAK,IAAI;AAAA,UAClB,YAAY;AAAA,QACd;AAAA,MACF,IACA;AAGN,YAAM,UAAU,WAAW,GAAG,YAAY,KAAK;AAE/C,YAAM,YAAY,OAAO,SAAS,IAAI,IAAI,QAAQ,YAAY;AAE9D,YAAM,aAAa,QAAQ,SAAS,KAAK,IAAI,IAAI,QAAQ,SAAS;AAElE,YAAM,WAAW,MAAM,SAAS,GAAG,IAAI,QAAQ,QAAQ;AACvD,YAAM,cAAc;AAAA,QAClB,IAAI,WAAW,WAAW,YAAY,UAAU,QAAQ;AAAA,MAC1D;AAEA,YAAM,YAAY,MAAM,KAAK,CAAC,SAAS,KAAK,SAAS,WAAW;AAEhE,YAAM,OAAO,MAAM,OAAO,CAACC,OAAY,SAAS;AAC9C,cAAM,WAAW,SAAS,KAAK,KAAK;AACpC,gBAAQ,KAAK,MAAM;AAAA,UACjB,KAAK;AAIH,gBAAI,aAAa,GAAG;AAClB,qBAAO;AAAA,YACT;AACA,mBAAO,QAAQA,OAAM,QAAQ;AAAA,UAC/B,KAAK;AAEH,gBAAI,aAAa,GAAG;AAClB,qBAAO;AAAA,YACT;AACA,mBAAO,SAASA,OAAM,WAAW,CAAC;AAAA,UACpC,KAAK;AAEH,gBAAI,WAAW,eAAe,aAAa,GAAG;AAC5C,qBAAO;AAAA,YACT;AACA,mBAAO,QAAQA,OAAM,QAAQ;AAAA,UAC/B,KAAK;AACH,gBAAI,WAAW;AAIb,cAAAA,QAAO,SAASA,OAAM,WAAW,EAAE;AAEnC,oBAAM,iBAAiB,UAAU,UAAU,KAAK;AAEhD,kBACE,mBAAmB,UAAU,gBAAgB,CAAC,CAAC,KAC/C,mBAAmB,MACnB;AACA,gBAAAA,QAAO,SAASA,OAAM,EAAE;AAAA,cAC1B,WACE,mBAAmB,UAAU,gBAAgB,CAAC,CAAC,KAC/C,mBAAmB,MACnB;AACA,gBAAAA,QAAO;AAAA,cACT;AACA,qBAAOA;AAAA,YACT;AAEA,mBAAO,SAASA,OAAM,QAAQ;AAAA,UAChC,KAAK;AACH,mBAAO,WAAWA,OAAM,QAAQ;AAAA,UAClC,KAAK;AACH,mBAAO,WAAWA,OAAM,QAAQ;AAAA,UAClC,KAAK;AACH,mBAAO,gBAAgBA,OAAM,QAAQ;AAAA,UACvC;AAEE,mBAAOA;AAAA,QACX;AAAA,MAaF,GAAG,WAAW;AAEd,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,eAAe;AAAA,EAC5B;AAGA,QAAM,aAAa;AAAA,IACjB,MACE,QAAQ,WAAW,GAAG,YAAY,KAAK,CAAC,EAAE,IAAI,CAAC,EAAE,MAAAD,OAAM,MAAM,MAAM;AACjE,aAAO,EAAE,MAAAA,OAAM,OAAOA,UAAS,YAAY,QAAQ,GAAG;AAAA,IACxD,CAAC;AAAA,IACH,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,SAAO,EAAE,QAAQ,SAAS,YAAY,WAAW;AACnD;",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport {\n  addHours,\n  getDaysInMonth,\n  setDate,\n  setHours,\n  setMilliseconds,\n  setMinutes,\n  setMonth,\n  setSeconds,\n  setYear,\n  startOfDay,\n} from 'date-fns';\nimport { useCallback, useMemo } from 'react';\n\nimport type { Precision } from '../../../core/time/shared.types.js';\nimport { useDateTimeMessages } from '../../../core/time/useDateTimeMessages.js';\nimport {\n  getDayPeriodValues,\n  getSafeRegionalFormat,\n} from '../../forms-core/time/helpers.js';\nimport type { DateTimePickerProps } from '../types.js';\n\nconst INVALID_DATE = new TZDateMini('Invalid');\n\n/** Trim any spaces inside a string. */\nfunction trimSpace(str: string) {\n  return str.replace(/\\s+/g, '');\n}\n\n/** Provides functions to convert a date object to its parts and vice versa. */\nexport function useDateTimeFormat(\n  type: DateTimePickerProps['type'] = 'datetime',\n  precision: Precision = 'minutes',\n) {\n  const dayPeriodValues = useMemo(() => getDayPeriodValues(), []);\n\n  const {\n    timeZone,\n    formatDateToParts,\n    formatOptions: format,\n  } = useDateTimeMessages({\n    type,\n    precision,\n    locale: getSafeRegionalFormat(),\n  });\n\n  /**\n   * Convert a date object to its parts for the configured format.\n   * Part values are always zoned and based on the configured timezone.\n   */\n  const toParts = useCallback(\n    (date: Date) => formatDateToParts(date, format),\n    [format, formatDateToParts],\n  );\n\n  /** Convert parts to a UTC date object.  */\n  const toDateTime = useCallback(\n    (parts: Intl.DateTimeFormatPart[]) => {\n      // every non literal part must be empty\n      const isEmpty = !parts.some(\n        ({ type, value }) => type !== 'literal' && value !== '',\n      );\n\n      if (isEmpty) {\n        return null;\n      }\n\n      // Calculate max nrOfDays for given year and month.\n      const year = parts.find((p) => p.type === 'year')?.value;\n      const month = parts.find((p) => p.type === 'month')?.value;\n      const day = parts.find((p) => p.type === 'day')?.value;\n      const maxNrOfDays =\n        year !== undefined && month !== undefined\n          ? getDaysInMonth(\n              new TZDateMini(\n                parseInt(year),\n                parseInt(month) - 1,\n                timeZone ?? 'UTC',\n              ),\n            )\n          : 31;\n\n      // creates an initial date at the start of the current day\n      const current = TZDateMini.tz(timeZone ?? 'UTC');\n      // take year from parts or the current year\n      const yearValue = year ? parseInt(year) : current.getFullYear();\n      // take month from parts or the current month\n      const monthValue = month ? parseInt(month) - 1 : current.getMonth();\n      // take day from parts or the current day\n      const dayValue = day ? parseInt(day) : current.getDate();\n      const initialDate = startOfDay(\n        new TZDateMini(yearValue, monthValue, dayValue, timeZone),\n      );\n\n      const dayPeriod = parts.find((part) => part.type === 'dayPeriod');\n\n      const date = parts.reduce((date: Date, part) => {\n        const intValue = parseInt(part.value);\n        switch (part.type) {\n          case 'year':\n            // In the Japanese region, the date format is YYYY.MM.DD, and setYear(date, 0) is called first.\n            // If a leading 0 is entered, the initialDate becomes '1899-12-31T23:00:00Z'.\n            // This can cause the date to underflow to '-000001-12-31', resulting in invalid dates.\n            if (intValue === 0) {\n              return INVALID_DATE;\n            }\n            return setYear(date, intValue);\n          case 'month':\n            // setMonth interprets the leading 0 as December of the previous year.\n            if (intValue === 0) {\n              return INVALID_DATE;\n            }\n            return setMonth(date, intValue - 1);\n          case 'day':\n            // setDay interprets the leading 0 as the 31st of the previous month.\n            if (intValue > maxNrOfDays || intValue === 0) {\n              return INVALID_DATE;\n            }\n            return setDate(date, intValue);\n          case 'hour':\n            if (dayPeriod) {\n              // We handle the day period together with the hours as the day period can be defined\n              // before or after the hours in different languages. To ensure a proper handling of\n              // the hours together with day periods we do this together.\n              date = setHours(date, intValue % 12); // Treat 12 as 0 in 12h notation.\n              //Some locales do have a space in the day period, e.g. 'a. m.' or 'p. m.'. To compare them we trim the spaces.\n              const dayPeriodValue = trimSpace(dayPeriod.value);\n\n              if (\n                dayPeriodValue === trimSpace(dayPeriodValues[1]) ||\n                dayPeriodValue === 'PM'\n              ) {\n                date = addHours(date, 12); // If the day period is in the afternoon add 12 hours.\n              } else if (\n                dayPeriodValue !== trimSpace(dayPeriodValues[0]) &&\n                dayPeriodValue !== 'AM'\n              ) {\n                date = INVALID_DATE; // If the day period doesn't match AM or PM (in any locale), we treat it as invalid date.\n              }\n              return date;\n            }\n\n            return setHours(date, intValue);\n          case 'minute':\n            return setMinutes(date, intValue);\n          case 'second':\n            return setSeconds(date, intValue);\n          case 'fractionalSecond':\n            return setMilliseconds(date, intValue);\n          default:\n            // Ignore time literals and other part types.\n            return date;\n        }\n        // Already set the month and year of the new date to the month selected to avoid issues when setting the day.\n        // If in the current locale, the date format is e.g. <day><month><year>, setting the day may shift to the next\n        // month if the current month has less days.\n        // e.g.\n        //    current month = April\n        //    selected day = 31\n        //    setDate(31) would shift to May 1, since April only has 30 days\n        // FIXME\n        // In the 'should not close the overlay when the input is blurred' unit test, for some reason in the 'to' input,\n        // the month spin button 'onChange' is triggered when typing '1', even though spin buttons should not even be\n        // rendered. The year fallback is to avoid errors generating the new date in this case ('-01-01' is not supported).\n        // Doesn't happen in the browser, but may be some state updates somewhere that could cause issues at some point.\n      }, initialDate);\n\n      return date;\n    },\n    [timeZone, dayPeriodValues],\n  );\n\n  // provide empty parts for null value in current datetime format\n  const emptyParts = useMemo(\n    () =>\n      toParts(TZDateMini.tz(timeZone ?? 'UTC')).map(({ type, value }) => {\n        return { type, value: type === 'literal' ? value : '' };\n      }),\n    [toParts, timeZone],\n  );\n\n  return { format, toParts, toDateTime, emptyParts };\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa,eAAe;AAGrC,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP,MAAM,eAAe,IAAI,WAAW,SAAS;AAG7C,SAAS,UAAU,KAAa;AAC9B,SAAO,IAAI,QAAQ,QAAQ,EAAE;AAC/B;AAGO,SAAS,kBACd,OAAoC,YACpC,YAAuB,WACvB;AACA,QAAM,kBAAkB,QAAQ,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB,IAAI,oBAAoB;AAAA,IACtB;AAAA,IACA;AAAA,IACA,QAAQ,sBAAsB;AAAA,EAChC,CAAC;AAMD,QAAM,UAAU;AAAA,IACd,CAAC,SAAe,kBAAkB,MAAM,MAAM;AAAA,IAC9C,CAAC,QAAQ,iBAAiB;AAAA,EAC5B;AAGA,QAAM,aAAa;AAAA,IACjB,CAAC,UAAqC;AAEpC,YAAM,UAAU,CAAC,MAAM;AAAA,QACrB,CAAC,EAAE,MAAAA,OAAM,MAAM,MAAMA,UAAS,aAAa,UAAU;AAAA,MACvD;AAEA,UAAI,SAAS;AACX,eAAO;AAAA,MACT;AAGA,YAAM,OAAO,MAAM,KAAK,CAAC,MAAM,EAAE,SAAS,MAAM,GAAG;AACnD,YAAM,QAAQ,MAAM,KAAK,CAAC,MAAM,EAAE,SAAS,OAAO,GAAG;AACrD,YAAM,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,SAAS,KAAK,GAAG;AACjD,YAAM,cACJ,SAAS,UAAa,UAAU,SAC5B;AAAA,QACE,IAAI;AAAA,UACF,SAAS,IAAI;AAAA,UACb,SAAS,KAAK,IAAI;AAAA,UAClB,YAAY;AAAA,QACd;AAAA,MACF,IACA;AAGN,YAAM,UAAU,WAAW,GAAG,YAAY,KAAK;AAE/C,YAAM,YAAY,OAAO,SAAS,IAAI,IAAI,QAAQ,YAAY;AAE9D,YAAM,aAAa,QAAQ,SAAS,KAAK,IAAI,IAAI,QAAQ,SAAS;AAElE,YAAM,WAAW,MAAM,SAAS,GAAG,IAAI,QAAQ,QAAQ;AACvD,YAAM,cAAc;AAAA,QAClB,IAAI,WAAW,WAAW,YAAY,UAAU,QAAQ;AAAA,MAC1D;AAEA,YAAM,YAAY,MAAM,KAAK,CAAC,SAAS,KAAK,SAAS,WAAW;AAEhE,YAAM,OAAO,MAAM,OAAO,CAACC,OAAY,SAAS;AAC9C,cAAM,WAAW,SAAS,KAAK,KAAK;AACpC,gBAAQ,KAAK,MAAM;AAAA,UACjB,KAAK;AAIH,gBAAI,aAAa,GAAG;AAClB,qBAAO;AAAA,YACT;AACA,mBAAO,QAAQA,OAAM,QAAQ;AAAA,UAC/B,KAAK;AAEH,gBAAI,aAAa,GAAG;AAClB,qBAAO;AAAA,YACT;AACA,mBAAO,SAASA,OAAM,WAAW,CAAC;AAAA,UACpC,KAAK;AAEH,gBAAI,WAAW,eAAe,aAAa,GAAG;AAC5C,qBAAO;AAAA,YACT;AACA,mBAAO,QAAQA,OAAM,QAAQ;AAAA,UAC/B,KAAK;AACH,gBAAI,WAAW;AAIb,cAAAA,QAAO,SAASA,OAAM,WAAW,EAAE;AAEnC,oBAAM,iBAAiB,UAAU,UAAU,KAAK;AAEhD,kBACE,mBAAmB,UAAU,gBAAgB,CAAC,CAAC,KAC/C,mBAAmB,MACnB;AACA,gBAAAA,QAAO,SAASA,OAAM,EAAE;AAAA,cAC1B,WACE,mBAAmB,UAAU,gBAAgB,CAAC,CAAC,KAC/C,mBAAmB,MACnB;AACA,gBAAAA,QAAO;AAAA,cACT;AACA,qBAAOA;AAAA,YACT;AAEA,mBAAO,SAASA,OAAM,QAAQ;AAAA,UAChC,KAAK;AACH,mBAAO,WAAWA,OAAM,QAAQ;AAAA,UAClC,KAAK;AACH,mBAAO,WAAWA,OAAM,QAAQ;AAAA,UAClC,KAAK;AACH,mBAAO,gBAAgBA,OAAM,QAAQ;AAAA,UACvC;AAEE,mBAAOA;AAAA,QACX;AAAA,MAaF,GAAG,WAAW;AAEd,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,eAAe;AAAA,EAC5B;AAGA,QAAM,aAAa;AAAA,IACjB,MACE,QAAQ,WAAW,GAAG,YAAY,KAAK,CAAC,EAAE,IAAI,CAAC,EAAE,MAAAD,OAAM,MAAM,MAAM;AACjE,aAAO,EAAE,MAAAA,OAAM,OAAOA,UAAS,YAAY,QAAQ,GAAG;AAAA,IACxD,CAAC;AAAA,IACH,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,SAAO,EAAE,QAAQ,SAAS,YAAY,WAAW;AACnD;",
   "names": ["type", "date"]
 }

package/esm/forms/date-time-picker/hooks/useDateTimePicker.js

@@ -1,6 +1,6 @@
 import { TZDateMini } from "@date-fns/tz";
 import { isAfter, isBefore, isValid } from "date-fns";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
 import { useAriaLabelingProps } from "../../../core/hooks/useAriaLabelingProps.js";
 import { usePrevious } from "../../../core/hooks/usePrevious.js";
@@ -20,7 +20,6 @@ function useDateTimePicker(props) {
     disabled = false,
     readOnly = false,
     value: propValue,
-    defaultValue = "",
     onChange,
     required,
     valueType
@@ -28,15 +27,11 @@ function useDateTimePicker(props) {
   const isDisabled = disabled || valueType !== "iso8601";
   const timezone = getTimezone();
   const { "aria-label": ariaLabelPrefix } = useAriaLabelingProps(props);
-  const isControlled = propValue !== void 0;
   const value = propValue === "" ? null : propValue;
   const [isoDateTime, setIsoDateTime] = useState(
-    getTimeValue(
-      (isControlled ? value : defaultValue) ?? void 0,
-      precision,
-      type
-    )?.absoluteDate ?? null
+    getTimeValue(value ?? void 0, precision)?.absoluteDate ?? null
   );
+  const pendingIsoDateTimeRef = useRef(isoDateTime);
   const { toParts, emptyParts } = useDateTimeFormat(type, precision);
   const {
     state: { isValid: isValidFormControl }
@@ -119,32 +114,32 @@ function useDateTimePicker(props) {
       return;
     }
     if (dateTime === null) {
+      pendingIsoDateTimeRef.current = null;
       setIsoDateTime(null);
       onChange?.(null);
       return;
     }
     if (!isValid(dateTime)) {
+      pendingIsoDateTimeRef.current = null;
       setIsoDateTime(null);
-      onChange?.("");
+      onChange?.("Invalid Date");
       return;
     }
     const newIsoDateTime = dateTime.toISOString();
     if (isoDateTime === newIsoDateTime) {
       return;
     }
+    pendingIsoDateTimeRef.current = newIsoDateTime;
     setIsoDateTime(newIsoDateTime);
-    onChange?.(getTimeValue(newIsoDateTime ?? null, precision, type) ?? null);
+    onChange?.(getTimeValue(newIsoDateTime ?? null, precision) ?? null);
   }, [dateTime, prevDateTime]);
   useEffect(() => {
-    if (!isControlled) {
-      return;
-    }
     if (removePrecision(
-      isoDateTime ?? "",
+      pendingIsoDateTimeRef.current ?? "",
       type === "date" ? "day" : precision
     ) !== value) {
       applyDateTime(
-        getTimeValue(value ?? void 0, precision, type)?.absoluteDate ?? null
+        getTimeValue(value ?? void 0, precision)?.absoluteDate ?? null
       );
     }
   }, [value]);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-picker/hooks/useDateTimePicker.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { isAfter, isBefore, isValid } from 'date-fns';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { usePrevious } from '../../../core/hooks/usePrevious.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getTimeValue,\n  removePrecision,\n} from '../../forms-core/time/timeParser.js';\nimport type {\n  DateSelectorProps,\n  DateTimePickerProps,\n  DateTimePickerType,\n} from '../types.js';\nimport { useDateTimeFormat } from './useDateTimeFormat.js';\nimport { useSpinButtons } from './useSpinButtons.js';\nimport type { TimeValue } from '../../../core/types/time.js';\n\n/**\n * Hook to provide the validation and 2way binding between the iso date and the rendered spinbuttons.\n */\nexport function useDateTimePicker(\n  // 'type' may be 'never', but for the hook we always want to accept it.\n  props: Omit<DateTimePickerProps, 'type'> & {\n    type?: DateTimePickerType;\n    valueType?: TimeValue['type'];\n  },\n) {\n  const {\n    type,\n    precision,\n    min,\n    max,\n    disabled = false,\n    readOnly = false,\n    value: propValue,\n    defaultValue = '',\n    onChange,\n    required,\n    valueType,\n  } = props;\n\n  // The spin buttons are only visible and interactive\n  // in 'iso8601' mode and should be disabled for expression input\n  const isDisabled = disabled || valueType !== 'iso8601';\n\n  const timezone = getTimezone();\n\n  // use the aria label of the datetime picker to prefix each spinbutton aria label\n  const { 'aria-label': ariaLabelPrefix } = useAriaLabelingProps(props);\n\n  const isControlled = propValue !== undefined;\n  const value = propValue === '' ? null : propValue;\n\n  const [isoDateTime, setIsoDateTime] = useState(\n    getTimeValue(\n      (isControlled ? value : defaultValue) ?? undefined,\n      precision,\n      type,\n    )?.absoluteDate ?? null,\n  );\n  const { toParts, emptyParts } = useDateTimeFormat(type, precision);\n  const {\n    state: { isValid: isValidFormControl },\n  } = useFormFieldMessagesContext();\n  const { spinButtons, dateTime, updateParts, handlers, parts, toDateTime } =\n    useSpinButtons(\n      isoDateTime,\n      type,\n      precision,\n      isDisabled,\n      readOnly,\n      ariaLabelPrefix,\n      value,\n    );\n  const prevDateTime = usePrevious(dateTime);\n\n  const minDateTime = useMemo(() => {\n    const candidate =\n      min !== undefined ? new TZDateMini(min, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [min, timezone]);\n  const maxDateTime = useMemo(() => {\n    const candidate =\n      max !== undefined ? new TZDateMini(max, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [max, timezone]);\n\n  /**\n   * Callback to apply a given iso date to the currently rendered spinbuttons\n   * Accepts a pass filter to apply the iso datetime to only a subset of the spinbuttons.\n   * Returns true, if the iso date was applied successfully. False otherwise.\n   */\n  const applyDateTime = useCallback(\n    (\n      isoDateTime: string | null,\n      passFilter?: Set<Intl.DateTimeFormatPart['type']>,\n    ) => {\n      if (isoDateTime === null) {\n        updateParts(emptyParts);\n        return true;\n      }\n\n      const newDate = new TZDateMini(isoDateTime, timezone);\n\n      // Add timezone offset for type 'date' to have the correct date when there is no time information (2025-01-01Z).\n      newDate.setMinutes(\n        newDate.getMinutes() +\n          (type === 'date' ? newDate.getTimezoneOffset() : 0),\n      );\n\n      if (!isValid(newDate)) {\n        return false;\n      }\n      const newDateParts = toParts(newDate);\n      passFilter\n        ? updateParts(newDateParts.filter((p) => passFilter.has(p.type)))\n        : updateParts(newDateParts);\n\n      return true;\n    },\n    [emptyParts, timezone, toParts, type, updateParts],\n  );\n\n  const dateSelectorProps: DateSelectorProps = useMemo(\n    () => ({\n      value: isoDateTime ?? TZDateMini.tz(timezone).toISOString(),\n      onChange: (newIsoString) => {\n        // Only apply the date part of the iso date returned by the calendar.\n        // Don't touch the time values, but set the focus to the hour field in the next render cycle.\n        applyDateTime(newIsoString, new Set(['year', 'month', 'day']));\n        // Selecting a date in the calendar closes the overlay and restores the focus to the date picker trigger.\n        // In order to set the focus to the time spin buttons, we need to defer setting the focus.\n        requestAnimationFrame(() =>\n          handlers.get('hour')?.element.current?.focus(),\n        );\n      },\n      disabled: disabled || readOnly,\n      error: false,\n    }),\n    [isoDateTime, timezone, disabled, readOnly, applyDateTime, handlers],\n  );\n\n  // Show the error state, if the value is outside of given bounds or the date object is invalid.\n  const error = useMemo(() => {\n    if (!isValidFormControl) {\n      return true;\n    }\n\n    if (!required && isoDateTime === null) {\n      return false;\n    }\n\n    return (\n      (dateTime === null ||\n        !isValid(dateTime) ||\n        (minDateTime && isBefore(dateTime, minDateTime)) ||\n        (maxDateTime && isAfter(dateTime, maxDateTime))) ??\n      false\n    );\n  }, [\n    isValidFormControl,\n    required,\n    isoDateTime,\n    dateTime,\n    minDateTime,\n    maxDateTime,\n  ]);\n\n  // true, if none of the content parts contains any content\n  const empty = useMemo(\n    () => !parts.some((part) => part.type !== 'literal' && part.value !== ''),\n    [parts],\n  );\n\n  // If the datetime is valid, convert to an ISO8601 datetime string.\n  useEffect(() => {\n    // Don't trigger an 'onChange' on initial render or if the value didn't actually change.\n    const numericDateTime = +(dateTime || 0);\n    const numericPrevDateTime = +(prevDateTime || 0);\n    if (\n      prevDateTime === undefined ||\n      (Number.isNaN(numericDateTime) && Number.isNaN(numericPrevDateTime)) ||\n      numericDateTime === numericPrevDateTime\n    ) {\n      return;\n    }\n\n    // propagate null dateTime to isoDateTime\n    if (dateTime === null) {\n      setIsoDateTime(null);\n      onChange?.(null);\n      return;\n    }\n\n    // only allow valid datetime values\n    if (!isValid(dateTime)) {\n      setIsoDateTime(null);\n      onChange?.('');\n      return;\n    }\n\n    const newIsoDateTime = dateTime.toISOString();\n\n    // ignore if nothing has changed\n    if (isoDateTime === newIsoDateTime) {\n      return;\n    }\n\n    setIsoDateTime(newIsoDateTime);\n    onChange?.(getTimeValue(newIsoDateTime ?? null, precision, type) ?? null);\n\n    // Don't run on an onChange callback update.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [dateTime, prevDateTime]);\n\n  // If the controlled value has changed, apply the new value to the spinbuttons\n  // Don't combine with the above effect. This effect needs to be run in the next render cycle.\n  useEffect(() => {\n    if (!isControlled) {\n      return;\n    }\n\n    // only apply if value is different (prevents issues while typing and prefixing with 0)\n    if (\n      removePrecision(\n        isoDateTime ?? '',\n        type === 'date' ? 'day' : precision,\n      ) !== value\n    ) {\n      applyDateTime(\n        getTimeValue(value ?? undefined, precision, type)?.absoluteDate ?? null,\n      );\n    }\n\n    // Only run if the controlled prop value is updated.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  return {\n    isoDateTime,\n    spinButtons,\n    handlers,\n    dateSelectorProps,\n    error,\n    empty,\n    applyDateTime,\n    firstSpinButtonHandler: handlers.get(parts[0]?.type),\n    dateTime,\n    toDateTime,\n    parts,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { isAfter, isBefore, isValid } from 'date-fns';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { usePrevious } from '../../../core/hooks/usePrevious.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getTimeValue,\n  removePrecision,\n} from '../../forms-core/time/timeParser.js';\nimport type {\n  DateSelectorProps,\n  DateTimePickerProps,\n  DateTimePickerType,\n} from '../types.js';\nimport { useDateTimeFormat } from './useDateTimeFormat.js';\nimport { useSpinButtons } from './useSpinButtons.js';\nimport type { TimeValue } from '../../../core/types/time.js';\n\n/**\n * Hook to provide the validation and 2way binding between the iso date and the rendered spinbuttons.\n */\nexport function useDateTimePicker(\n  // 'type' may be 'never', but for the hook we always want to accept it.\n  props: Omit<DateTimePickerProps, 'type'> & {\n    type?: DateTimePickerType;\n    valueType?: TimeValue['type'];\n    value: string | null;\n  },\n) {\n  const {\n    type,\n    precision,\n    min,\n    max,\n    disabled = false,\n    readOnly = false,\n    value: propValue,\n    onChange,\n    required,\n    valueType,\n  } = props;\n\n  // The spin buttons are only visible and interactive\n  // in 'iso8601' mode and should be disabled for expression input\n  const isDisabled = disabled || valueType !== 'iso8601';\n\n  const timezone = getTimezone();\n\n  // use the aria label of the datetime picker to prefix each spinbutton aria label\n  const { 'aria-label': ariaLabelPrefix } = useAriaLabelingProps(props);\n\n  const value = propValue === '' ? null : propValue;\n\n  const [isoDateTime, setIsoDateTime] = useState(\n    getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null,\n  );\n\n  // Tracks the intended isoDateTime value synchronously, before React commits the\n  // new state. The TimeframeSelector's setDateTimeRangePickerTimeframe always updates\n  // the Zustand store synchronously inside the dateTime effect (before React commits\n  // isoDateTime). This triggers a subscriber re-render where spinButtonValue is already\n  // the new value but isoDateTime in the closure is still the old stale value. The\n  // controlled value effect would then call applyDateTime unnecessarily, resetting the\n  // spinbutton cursor to position 0 so that the next digit typed would be rejected as\n  // too long (candidate \"00020\" exceeds the 4-digit max). By updating this ref before\n  // calling setIsoDateTime, the controlled value effect always compares against the\n  // correct pending value regardless of when Zustand triggers its re-render.\n  const pendingIsoDateTimeRef = useRef(isoDateTime);\n  const { toParts, emptyParts } = useDateTimeFormat(type, precision);\n  const {\n    state: { isValid: isValidFormControl },\n  } = useFormFieldMessagesContext();\n  const { spinButtons, dateTime, updateParts, handlers, parts, toDateTime } =\n    useSpinButtons(\n      isoDateTime,\n      type,\n      precision,\n      isDisabled,\n      readOnly,\n      ariaLabelPrefix,\n      value,\n    );\n  const prevDateTime = usePrevious(dateTime);\n\n  const minDateTime = useMemo(() => {\n    const candidate =\n      min !== undefined ? new TZDateMini(min, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [min, timezone]);\n  const maxDateTime = useMemo(() => {\n    const candidate =\n      max !== undefined ? new TZDateMini(max, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [max, timezone]);\n\n  /**\n   * Callback to apply a given iso date to the currently rendered spinbuttons\n   * Accepts a pass filter to apply the iso datetime to only a subset of the spinbuttons.\n   * Returns true, if the iso date was applied successfully. False otherwise.\n   */\n  const applyDateTime = useCallback(\n    (\n      isoDateTime: string | null,\n      passFilter?: Set<Intl.DateTimeFormatPart['type']>,\n    ) => {\n      if (isoDateTime === null) {\n        updateParts(emptyParts);\n        return true;\n      }\n\n      const newDate = new TZDateMini(isoDateTime, timezone);\n\n      // Add timezone offset for type 'date' to have the correct date when there is no time information (2025-01-01Z).\n      newDate.setMinutes(\n        newDate.getMinutes() +\n          (type === 'date' ? newDate.getTimezoneOffset() : 0),\n      );\n\n      if (!isValid(newDate)) {\n        return false;\n      }\n      const newDateParts = toParts(newDate);\n      passFilter\n        ? updateParts(newDateParts.filter((p) => passFilter.has(p.type)))\n        : updateParts(newDateParts);\n\n      return true;\n    },\n    [emptyParts, timezone, toParts, type, updateParts],\n  );\n\n  const dateSelectorProps: DateSelectorProps = useMemo(\n    () => ({\n      value: isoDateTime ?? TZDateMini.tz(timezone).toISOString(),\n      onChange: (newIsoString: string) => {\n        // Only apply the date part of the iso date returned by the calendar.\n        // Don't touch the time values, but set the focus to the hour field in the next render cycle.\n        applyDateTime(newIsoString, new Set(['year', 'month', 'day']));\n        // Selecting a date in the calendar closes the overlay and restores the focus to the date picker trigger.\n        // In order to set the focus to the time spin buttons, we need to defer setting the focus.\n        requestAnimationFrame(() =>\n          handlers.get('hour')?.element.current?.focus(),\n        );\n      },\n      disabled: disabled || readOnly,\n      error: false,\n    }),\n    [isoDateTime, timezone, disabled, readOnly, applyDateTime, handlers],\n  );\n\n  // Show the error state, if the value is outside of given bounds or the date object is invalid.\n  const error = useMemo(() => {\n    if (!isValidFormControl) {\n      return true;\n    }\n\n    if (!required && isoDateTime === null) {\n      return false;\n    }\n\n    return (\n      (dateTime === null ||\n        !isValid(dateTime) ||\n        (minDateTime && isBefore(dateTime, minDateTime)) ||\n        (maxDateTime && isAfter(dateTime, maxDateTime))) ??\n      false\n    );\n  }, [\n    isValidFormControl,\n    required,\n    isoDateTime,\n    dateTime,\n    minDateTime,\n    maxDateTime,\n  ]);\n\n  // true, if none of the content parts contains any content\n  const empty = useMemo(\n    () => !parts.some((part) => part.type !== 'literal' && part.value !== ''),\n    [parts],\n  );\n\n  // If the datetime is valid, convert to an ISO8601 datetime string.\n  useEffect(() => {\n    // Don't trigger an 'onChange' on initial render or if the value didn't actually change.\n    const numericDateTime = +(dateTime || 0);\n    const numericPrevDateTime = +(prevDateTime || 0);\n    if (\n      prevDateTime === undefined ||\n      (Number.isNaN(numericDateTime) && Number.isNaN(numericPrevDateTime)) ||\n      numericDateTime === numericPrevDateTime\n    ) {\n      return;\n    }\n\n    // propagate null dateTime to isoDateTime\n    if (dateTime === null) {\n      pendingIsoDateTimeRef.current = null;\n      setIsoDateTime(null);\n      onChange?.(null);\n      return;\n    }\n\n    // only allow valid datetime values\n    if (!isValid(dateTime)) {\n      pendingIsoDateTimeRef.current = null;\n      setIsoDateTime(null);\n      onChange?.('Invalid Date');\n      return;\n    }\n\n    const newIsoDateTime = dateTime.toISOString();\n\n    // ignore if nothing has changed\n    if (isoDateTime === newIsoDateTime) {\n      return;\n    }\n\n    // Update the ref synchronously before calling setIsoDateTime so that any\n    // Zustand subscriber re-render triggered synchronously by the onChange chain\n    // below already sees the correct pending value in the controlled value effect.\n    pendingIsoDateTimeRef.current = newIsoDateTime;\n    setIsoDateTime(newIsoDateTime);\n    onChange?.(getTimeValue(newIsoDateTime ?? null, precision) ?? null);\n\n    // Don't run on an onChange callback update.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [dateTime, prevDateTime]);\n\n  // If the controlled value has changed, apply the new value to the spinbuttons\n  // Don't combine with the above effect. This effect needs to be run in the next render cycle.\n  useEffect(() => {\n    // only apply if value is different (prevents issues while typing and prefixing with 0)\n    if (\n      removePrecision(\n        pendingIsoDateTimeRef.current ?? '',\n        type === 'date' ? 'day' : precision,\n      ) !== value\n    ) {\n      applyDateTime(\n        getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null,\n      );\n    }\n\n    // Only run if the controlled prop value is updated.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  return {\n    isoDateTime,\n    spinButtons,\n    handlers,\n    dateSelectorProps,\n    error,\n    empty,\n    applyDateTime,\n    firstSpinButtonHandler: handlers.get(parts[0]?.type),\n    dateTime,\n    toDateTime,\n    parts,\n  };\n}\n"],
+  "mappings": "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",
   "names": ["isoDateTime"]
 }

package/esm/forms/date-time-picker/hooks/useSpinButtons.js

@@ -46,7 +46,7 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
       return newDateTime;
     }
     const date = new TZDateMini(
-      getTimeValue(value, precision, type)?.absoluteDate ?? startOfDay(TZDateMini.tz(timezone)).toISOString(),
+      getTimeValue(value, precision)?.absoluteDate ?? startOfDay(TZDateMini.tz(timezone)).toISOString(),
       timezone
     );
     const milliseconds = date.getMilliseconds();

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-picker/hooks/useSpinButtons.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { getDaysInMonth, isValid, startOfDay } from 'date-fns';\nimport { isNil } from 'lodash-es';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { replaceSecondFractions } from '../../forms-core/time/date-time.js';\nimport {\n  convertDateOnlyToDateTime,\n  getDayPeriodValues,\n} from '../../forms-core/time/helpers.js';\nimport { getTimeValue } from '../../forms-core/time/timeParser.js';\nimport { SpinButtonGroup } from '../../spin-buttons/spin-button-group/SpinButtonGroup.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\nimport type { DateTimePickerProps } from '../types.js';\nimport { useDateTimeFormat } from './useDateTimeFormat.js';\nimport type { NumberSpinButtonProps } from '../../spin-buttons/number-spin-button/types.js';\nimport type { TextSpinButtonProps } from '../../spin-buttons/text-spin-button/types.js';\n/**\n * Returns a list of preconfigured spinbuttons for a given datetime and format configuration.\n */\nexport function useSpinButtons(\n  isoDateTime: TimeValue | string | null,\n  type: DateTimePickerProps['type'],\n  precision: DateTimePickerProps['precision'],\n  isDisabled: boolean,\n  isReadonly: boolean,\n  ariaLabelPrefix: string | undefined,\n  value?: TimeValue | string | null,\n) {\n  const intl = useIntl();\n  const prefix = ariaLabelPrefix ? `${ariaLabelPrefix} ` : '';\n\n  const { toParts, toDateTime, emptyParts } = useDateTimeFormat(\n    type,\n    precision,\n  );\n  const timeValue = useMemo(() => getTimeValue(isoDateTime), [isoDateTime]);\n  const dayPeriodValues = useMemo(() => getDayPeriodValues(), []);\n  const timezone = getTimezone();\n\n  const [parts, setParts] = useState(\n    timeValue !== null && timeValue !== undefined\n      ? toParts(\n          new TZDateMini(\n            convertDateOnlyToDateTime(timeValue.absoluteDate, type),\n            timezone,\n          ),\n        )\n      : emptyParts,\n  );\n  const hasDayPeriod = useMemo(\n    () => parts.some((p) => p.type === 'dayPeriod'),\n    [parts],\n  );\n\n  const precisionRef = useRef(precision);\n\n  const dateTime = useMemo(() => {\n    const newDateTime = toDateTime(parts);\n    if (!newDateTime || !isValid(newDateTime)) {\n      return newDateTime;\n    }\n\n    if (precision === precisionRef.current && precision === 'milliseconds') {\n      return newDateTime;\n    }\n\n    const date = new TZDateMini(\n      getTimeValue(value, precision, type)?.absoluteDate ??\n        startOfDay(TZDateMini.tz(timezone)).toISOString(),\n      timezone,\n    );\n    const milliseconds = date.getMilliseconds();\n    const seconds = date.getUTCSeconds();\n\n    if (\n      precision !== precisionRef.current ||\n      precision === 'minutes' ||\n      precision === undefined\n    ) {\n      newDateTime.setUTCSeconds(seconds);\n      precisionRef.current = precision;\n    }\n\n    return new TZDateMini(\n      replaceSecondFractions(\n        newDateTime.toISOString(),\n        milliseconds.toString(),\n      ),\n      timezone,\n    );\n  }, [toDateTime, parts, precision, value, timezone]);\n\n  const daysInMonth =\n    dateTime !== null && isValid(dateTime) ? getDaysInMonth(dateTime) : 31;\n\n  const updatePart = useCallback(\n    (type: Intl.DateTimeFormatPart['type'] | undefined, value: string) => {\n      setParts((prevParts) => {\n        const index = prevParts.findIndex((p) => p.type === type);\n\n        // Ignore invalid part type or if value is unchanged\n        if (\n          index < 0 ||\n          prevParts[index].value === value ||\n          type === undefined\n        ) {\n          return prevParts;\n        }\n\n        // Clone the parts and update entry with new value\n        const newParts = [...prevParts];\n        newParts[index] = { type, value };\n        return newParts;\n      });\n    },\n    [],\n  );\n\n  const sharedProps = {\n    required: false,\n    disabled: isDisabled,\n    readOnly: isReadonly,\n    isCyclic: true,\n  };\n\n  const yearProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 4,\n    },\n    maxValue: 9999,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'year')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('year', value?.toString() ?? '');\n    },\n    'data-pattern': 'yyyy',\n  };\n\n  const monthProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 12,\n    minValue: 1,\n    value: parseInt(parts.find((p) => p.type === 'month')?.value ?? '0'),\n    onChange: (value) => {\n      const formerValue = parseInt(\n        parts.find((p) => p.type === 'month')?.value ?? '0',\n      );\n      if (value !== formerValue) {\n        updatePart('month', value?.toString() ?? '');\n      }\n    },\n    'data-pattern': 'MM',\n  };\n\n  const dayProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: daysInMonth,\n    minValue: 1,\n    value: parseInt(parts.find((p) => p.type === 'day')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('day', value?.toString() ?? '');\n    },\n    'data-pattern': 'dd',\n  };\n\n  const hourProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: hasDayPeriod ? 12 : 23,\n    minValue: hasDayPeriod ? 1 : 0,\n    value: parseInt(parts.find((p) => p.type === 'hour')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('hour', value?.toString() ?? '');\n    },\n    'data-pattern': parts.find((p) => p.type === 'dayPeriod') ? 'hh' : 'HH',\n  };\n\n  const minuteProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 59,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'minute')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('minute', value?.toString() ?? '');\n    },\n    'data-pattern': 'mm',\n  };\n\n  const secondsProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 59,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'second')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('second', value?.toString() ?? '');\n    },\n    'data-pattern': 'ss',\n  };\n\n  const fractionalSecondProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 3,\n    },\n    maxValue: 999,\n    minValue: 0,\n    value: parseInt(\n      parts.find((p) => p.type === 'fractionalSecond')?.value ?? '0',\n    ),\n    onChange: (value) => {\n      updatePart('fractionalSecond', value?.toString() ?? '');\n    },\n    'data-pattern': 'SSS',\n  };\n\n  const dayPeriodProps: TextSpinButtonProps = {\n    ...sharedProps,\n    options: dayPeriodValues,\n    value: parts.find((p) => p.type === 'dayPeriod')?.value,\n    onChange: (value) => {\n      if (value === null) {\n        updatePart?.('dayPeriod', '');\n        return;\n      }\n      updatePart?.('dayPeriod', value);\n    },\n    'data-pattern': 'aa',\n  };\n\n  const { spinButtons, handlers } = useMemo(() => {\n    // Keep a map of all the imperative handlers per spinbutton\n    const handlers = new Map<\n      Intl.DateTimeFormatPartTypes,\n      SpinButtonHandler | null\n    >();\n\n    const setHandler = (\n      handler: SpinButtonHandler | null,\n      type: Intl.DateTimeFormatPart['type'],\n    ) => {\n      handlers?.set?.(type, handler);\n    };\n\n    // Create an array of preconfigured spinbuttons for each datetime part.\n    const spinButtons = parts.map(({ type, value }, index) => {\n      switch (type) {\n        case 'year':\n          return (\n            <SpinButtonGroup.Number\n              {...yearProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                yearProps.value !== undefined\n                  ? yearProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}year',\n                  id: 'nZk5lg177+CQcO/Z',\n                  description: 'The aria label for the year input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'yyyy',\n                id: 'c6bnAmHe/EY7/jQS',\n                description: 'The abbreviation of the year part of a date',\n              })}\n            />\n          );\n        case 'month':\n          return (\n            <SpinButtonGroup.Number\n              {...monthProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                monthProps.value !== undefined\n                  ? monthProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}month',\n                  id: 'LoBSMcHvTQEABp39',\n                  description: 'The aria label for the month input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'mm',\n                id: 'LnDfRkxwzq9Vq/up',\n                description: 'The abbreviation of the month part of a date',\n              })}\n            />\n          );\n        case 'day':\n          return (\n            <SpinButtonGroup.Number\n              {...dayProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                dayProps.value !== undefined ? dayProps.value : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}day',\n                  id: 'Dz8K7VMW5UFpwetG',\n                  description: 'The aria label for the day input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'dd',\n                id: 'akyhaFko0pgLR1Q5',\n                description: 'The abbreviation of the day part of a date',\n              })}\n            />\n          );\n        case 'hour':\n          return (\n            <SpinButtonGroup.Number\n              {...hourProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                hourProps.value !== undefined\n                  ? hourProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}hour',\n                  id: 'DXoXEb27LMuapbC4',\n                  description: 'The aria label for the hour input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'hh',\n                id: '8ioXZP1LdljRBssM',\n                description: 'The abbreviation of the hour part of a time',\n              })}\n            />\n          );\n        case 'minute':\n          return (\n            <SpinButtonGroup.Number\n              {...minuteProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                minuteProps.value !== undefined\n                  ? minuteProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}minute',\n                  id: 'pGR/6J+2uPcvCSju',\n                  description: 'The aria label for the minute input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'mm',\n                id: 'Uk/Q/HKAITavgOfU',\n                description: 'The abbreviation of the minute part of a time',\n              })}\n            />\n          );\n        case 'second':\n          return (\n            <SpinButtonGroup.Number\n              {...secondsProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                secondsProps.value !== undefined\n                  ? secondsProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}second',\n                  id: 'WD6kswCbAgSXwMnO',\n                  description: 'The aria label for the second input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'ss',\n                id: 'wnjOChhd1Lw9s9Gg',\n                description: 'The abbreviation of the second part of a time',\n              })}\n            />\n          );\n        case 'fractionalSecond':\n          return (\n            <SpinButtonGroup.Number\n              {...fractionalSecondProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                fractionalSecondProps.value !== undefined\n                  ? fractionalSecondProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}millisecond',\n                  id: 'wa4ct2vRPvqd0Uif',\n                  description:\n                    'The aria label for the millisecond input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'fff',\n                id: 'ZSJMoZevK9FVBtMR',\n                description:\n                  'The abbreviation of the fractional of a second part of a time',\n              })}\n            />\n          );\n        case 'dayPeriod':\n          return (\n            <SpinButtonGroup.Text\n              {...dayPeriodProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                dayPeriodProps.value !== undefined\n                  ? dayPeriodProps.value\n                  : value\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}day period',\n                  id: 'a9uVGc0cPE1OqAJj',\n                  description:\n                    'The aria label for the day period (am/pm) input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'aa',\n                id: '8I3jLlYKntZOjiy8',\n                description:\n                  'The abbreviation for the day period (am/pm) part of a time',\n              })}\n            />\n          );\n        case 'literal':\n          return isNil(value) ? null : (\n            // Show the whole literal but only use the first char as trigger.\n            <SpinButtonGroup.Separator\n              key={`${type}_${index}`}\n              trigger={value[0]}\n            >\n              {value}\n            </SpinButtonGroup.Separator>\n          );\n        default:\n          // For unknown part types, simply render the value as textnode in the DOM.\n          return value;\n      }\n    });\n\n    return { handlers, spinButtons };\n    // Do not recreate the spinbuttons on parts update. This prevents prefix issues when starting values with 0.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    isDisabled,\n    isReadonly,\n    updatePart,\n    daysInMonth,\n    hasDayPeriod,\n    parts.length,\n    yearProps.value,\n    monthProps.value,\n    dayProps.value,\n    hourProps.value,\n    minuteProps.value,\n    secondsProps.value,\n    fractionalSecondProps.value,\n    dayPeriodProps.value,\n  ]);\n\n  // Callback to push the given part values to the corresponding spinbuttons.\n  const updateParts = useCallback(\n    (updatedParts: Intl.DateTimeFormatPart[]) => {\n      const nonLiteralParts = updatedParts.filter(\n        ({ type }) => type !== 'literal',\n      );\n\n      const lookup = new Map(\n        nonLiteralParts.map(({ type, value }) => [type, value]),\n      );\n\n      // Apply the new values to the spinbuttons.\n      // Would not be necessary, if the spinbuttons would be controlled. But this is not possible because this\n      // interferes with the expected typing behavior for spinbuttons with format patterns like for this one used for the datetime parts.\n      nonLiteralParts.forEach((part) => {\n        const handler = handlers.get(part.type);\n        if (part.value === '') {\n          handler?.clearValue();\n        } else if (handler?.type === 'number') {\n          handler.applyText(part.value, true);\n        } else if (handler?.type === 'text') {\n          handler.searchValue(part.value[0], true);\n        }\n      });\n\n      // update the parts with new values\n      setParts((prevParts) => {\n        return prevParts.map((part) => {\n          const newValue = lookup.get(part.type);\n          return newValue !== undefined ? { ...part, value: newValue } : part;\n        });\n      });\n    },\n    [handlers],\n  );\n\n  // If the format, type or precision is changing, restore the prev. values when generating a set of new spinbuttons.\n  useEffect(() => {\n    setParts(() => (dateTime === null ? emptyParts : toParts(dateTime)));\n    // Need to update the parts on precision change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [emptyParts, toDateTime, toParts, precision]);\n\n  return {\n    spinButtons,\n    dateTime,\n    updateParts,\n    handlers,\n    parts,\n    toDateTime,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { getDaysInMonth, isValid, startOfDay } from 'date-fns';\nimport { isNil } from 'lodash-es';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { replaceSecondFractions } from '../../forms-core/time/date-time.js';\nimport {\n  convertDateOnlyToDateTime,\n  getDayPeriodValues,\n} from '../../forms-core/time/helpers.js';\nimport { getTimeValue } from '../../forms-core/time/timeParser.js';\nimport { SpinButtonGroup } from '../../spin-buttons/spin-button-group/SpinButtonGroup.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\nimport type { DateTimePickerProps } from '../types.js';\nimport { useDateTimeFormat } from './useDateTimeFormat.js';\nimport type { NumberSpinButtonProps } from '../../spin-buttons/number-spin-button/types.js';\nimport type { TextSpinButtonProps } from '../../spin-buttons/text-spin-button/types.js';\n/**\n * Returns a list of preconfigured spinbuttons for a given datetime and format configuration.\n */\nexport function useSpinButtons(\n  isoDateTime: TimeValue | string | null,\n  type: DateTimePickerProps['type'],\n  precision: DateTimePickerProps['precision'],\n  isDisabled: boolean,\n  isReadonly: boolean,\n  ariaLabelPrefix: string | undefined,\n  value?: TimeValue | string | null,\n) {\n  const intl = useIntl();\n  const prefix = ariaLabelPrefix ? `${ariaLabelPrefix} ` : '';\n\n  const { toParts, toDateTime, emptyParts } = useDateTimeFormat(\n    type,\n    precision,\n  );\n  const timeValue = useMemo(() => getTimeValue(isoDateTime), [isoDateTime]);\n  const dayPeriodValues = useMemo(() => getDayPeriodValues(), []);\n  const timezone = getTimezone();\n\n  const [parts, setParts] = useState(\n    timeValue !== null && timeValue !== undefined\n      ? toParts(\n          new TZDateMini(\n            convertDateOnlyToDateTime(timeValue.absoluteDate, type),\n            timezone,\n          ),\n        )\n      : emptyParts,\n  );\n  const hasDayPeriod = useMemo(\n    () => parts.some((p) => p.type === 'dayPeriod'),\n    [parts],\n  );\n\n  const precisionRef = useRef(precision);\n\n  const dateTime = useMemo(() => {\n    const newDateTime = toDateTime(parts);\n    if (!newDateTime || !isValid(newDateTime)) {\n      return newDateTime;\n    }\n\n    if (precision === precisionRef.current && precision === 'milliseconds') {\n      return newDateTime;\n    }\n\n    const date = new TZDateMini(\n      getTimeValue(value, precision)?.absoluteDate ??\n        startOfDay(TZDateMini.tz(timezone)).toISOString(),\n      timezone,\n    );\n    const milliseconds = date.getMilliseconds();\n    const seconds = date.getUTCSeconds();\n\n    if (\n      precision !== precisionRef.current ||\n      precision === 'minutes' ||\n      precision === undefined\n    ) {\n      newDateTime.setUTCSeconds(seconds);\n      precisionRef.current = precision;\n    }\n\n    return new TZDateMini(\n      replaceSecondFractions(\n        newDateTime.toISOString(),\n        milliseconds.toString(),\n      ),\n      timezone,\n    );\n  }, [toDateTime, parts, precision, value, timezone]);\n\n  const daysInMonth =\n    dateTime !== null && isValid(dateTime) ? getDaysInMonth(dateTime) : 31;\n\n  const updatePart = useCallback(\n    (type: Intl.DateTimeFormatPart['type'] | undefined, value: string) => {\n      setParts((prevParts) => {\n        const index = prevParts.findIndex((p) => p.type === type);\n\n        // Ignore invalid part type or if value is unchanged\n        if (\n          index < 0 ||\n          prevParts[index].value === value ||\n          type === undefined\n        ) {\n          return prevParts;\n        }\n\n        // Clone the parts and update entry with new value\n        const newParts = [...prevParts];\n        newParts[index] = { type, value };\n        return newParts;\n      });\n    },\n    [],\n  );\n\n  const sharedProps = {\n    required: false,\n    disabled: isDisabled,\n    readOnly: isReadonly,\n    isCyclic: true,\n  };\n\n  const yearProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 4,\n    },\n    maxValue: 9999,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'year')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('year', value?.toString() ?? '');\n    },\n    'data-pattern': 'yyyy',\n  };\n\n  const monthProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 12,\n    minValue: 1,\n    value: parseInt(parts.find((p) => p.type === 'month')?.value ?? '0'),\n    onChange: (value) => {\n      const formerValue = parseInt(\n        parts.find((p) => p.type === 'month')?.value ?? '0',\n      );\n      if (value !== formerValue) {\n        updatePart('month', value?.toString() ?? '');\n      }\n    },\n    'data-pattern': 'MM',\n  };\n\n  const dayProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: daysInMonth,\n    minValue: 1,\n    value: parseInt(parts.find((p) => p.type === 'day')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('day', value?.toString() ?? '');\n    },\n    'data-pattern': 'dd',\n  };\n\n  const hourProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: hasDayPeriod ? 12 : 23,\n    minValue: hasDayPeriod ? 1 : 0,\n    value: parseInt(parts.find((p) => p.type === 'hour')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('hour', value?.toString() ?? '');\n    },\n    'data-pattern': parts.find((p) => p.type === 'dayPeriod') ? 'hh' : 'HH',\n  };\n\n  const minuteProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 59,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'minute')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('minute', value?.toString() ?? '');\n    },\n    'data-pattern': 'mm',\n  };\n\n  const secondsProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 59,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'second')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('second', value?.toString() ?? '');\n    },\n    'data-pattern': 'ss',\n  };\n\n  const fractionalSecondProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 3,\n    },\n    maxValue: 999,\n    minValue: 0,\n    value: parseInt(\n      parts.find((p) => p.type === 'fractionalSecond')?.value ?? '0',\n    ),\n    onChange: (value) => {\n      updatePart('fractionalSecond', value?.toString() ?? '');\n    },\n    'data-pattern': 'SSS',\n  };\n\n  const dayPeriodProps: TextSpinButtonProps = {\n    ...sharedProps,\n    options: dayPeriodValues,\n    value: parts.find((p) => p.type === 'dayPeriod')?.value,\n    onChange: (value) => {\n      if (value === null) {\n        updatePart?.('dayPeriod', '');\n        return;\n      }\n      updatePart?.('dayPeriod', value);\n    },\n    'data-pattern': 'aa',\n  };\n\n  const { spinButtons, handlers } = useMemo(() => {\n    // Keep a map of all the imperative handlers per spinbutton\n    const handlers = new Map<\n      Intl.DateTimeFormatPartTypes,\n      SpinButtonHandler | null\n    >();\n\n    const setHandler = (\n      handler: SpinButtonHandler | null,\n      type: Intl.DateTimeFormatPart['type'],\n    ) => {\n      handlers?.set?.(type, handler);\n    };\n\n    // Create an array of preconfigured spinbuttons for each datetime part.\n    const spinButtons = parts.map(({ type, value }, index) => {\n      switch (type) {\n        case 'year':\n          return (\n            <SpinButtonGroup.Number\n              {...yearProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                yearProps.value !== undefined\n                  ? yearProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}year',\n                  id: 'nZk5lg177+CQcO/Z',\n                  description: 'The aria label for the year input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'yyyy',\n                id: 'c6bnAmHe/EY7/jQS',\n                description: 'The abbreviation of the year part of a date',\n              })}\n            />\n          );\n        case 'month':\n          return (\n            <SpinButtonGroup.Number\n              {...monthProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                monthProps.value !== undefined\n                  ? monthProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}month',\n                  id: 'LoBSMcHvTQEABp39',\n                  description: 'The aria label for the month input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'mm',\n                id: 'LnDfRkxwzq9Vq/up',\n                description: 'The abbreviation of the month part of a date',\n              })}\n            />\n          );\n        case 'day':\n          return (\n            <SpinButtonGroup.Number\n              {...dayProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                dayProps.value !== undefined ? dayProps.value : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}day',\n                  id: 'Dz8K7VMW5UFpwetG',\n                  description: 'The aria label for the day input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'dd',\n                id: 'akyhaFko0pgLR1Q5',\n                description: 'The abbreviation of the day part of a date',\n              })}\n            />\n          );\n        case 'hour':\n          return (\n            <SpinButtonGroup.Number\n              {...hourProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                hourProps.value !== undefined\n                  ? hourProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}hour',\n                  id: 'DXoXEb27LMuapbC4',\n                  description: 'The aria label for the hour input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'hh',\n                id: '8ioXZP1LdljRBssM',\n                description: 'The abbreviation of the hour part of a time',\n              })}\n            />\n          );\n        case 'minute':\n          return (\n            <SpinButtonGroup.Number\n              {...minuteProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                minuteProps.value !== undefined\n                  ? minuteProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}minute',\n                  id: 'pGR/6J+2uPcvCSju',\n                  description: 'The aria label for the minute input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'mm',\n                id: 'Uk/Q/HKAITavgOfU',\n                description: 'The abbreviation of the minute part of a time',\n              })}\n            />\n          );\n        case 'second':\n          return (\n            <SpinButtonGroup.Number\n              {...secondsProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                secondsProps.value !== undefined\n                  ? secondsProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}second',\n                  id: 'WD6kswCbAgSXwMnO',\n                  description: 'The aria label for the second input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'ss',\n                id: 'wnjOChhd1Lw9s9Gg',\n                description: 'The abbreviation of the second part of a time',\n              })}\n            />\n          );\n        case 'fractionalSecond':\n          return (\n            <SpinButtonGroup.Number\n              {...fractionalSecondProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                fractionalSecondProps.value !== undefined\n                  ? fractionalSecondProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}millisecond',\n                  id: 'wa4ct2vRPvqd0Uif',\n                  description:\n                    'The aria label for the millisecond input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'fff',\n                id: 'ZSJMoZevK9FVBtMR',\n                description:\n                  'The abbreviation of the fractional of a second part of a time',\n              })}\n            />\n          );\n        case 'dayPeriod':\n          return (\n            <SpinButtonGroup.Text\n              {...dayPeriodProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                dayPeriodProps.value !== undefined\n                  ? dayPeriodProps.value\n                  : value\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}day period',\n                  id: 'a9uVGc0cPE1OqAJj',\n                  description:\n                    'The aria label for the day period (am/pm) input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={intl.formatMessage({\n                defaultMessage: 'aa',\n                id: '8I3jLlYKntZOjiy8',\n                description:\n                  'The abbreviation for the day period (am/pm) part of a time',\n              })}\n            />\n          );\n        case 'literal':\n          return isNil(value) ? null : (\n            // Show the whole literal but only use the first char as trigger.\n            <SpinButtonGroup.Separator\n              key={`${type}_${index}`}\n              trigger={value[0]}\n            >\n              {value}\n            </SpinButtonGroup.Separator>\n          );\n        default:\n          // For unknown part types, simply render the value as textnode in the DOM.\n          return value;\n      }\n    });\n\n    return { handlers, spinButtons };\n    // Do not recreate the spinbuttons on parts update. This prevents prefix issues when starting values with 0.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    isDisabled,\n    isReadonly,\n    updatePart,\n    daysInMonth,\n    hasDayPeriod,\n    parts.length,\n    yearProps.value,\n    monthProps.value,\n    dayProps.value,\n    hourProps.value,\n    minuteProps.value,\n    secondsProps.value,\n    fractionalSecondProps.value,\n    dayPeriodProps.value,\n  ]);\n\n  // Callback to push the given part values to the corresponding spinbuttons.\n  const updateParts = useCallback(\n    (updatedParts: Intl.DateTimeFormatPart[]) => {\n      const nonLiteralParts = updatedParts.filter(\n        ({ type }) => type !== 'literal',\n      );\n\n      const lookup = new Map(\n        nonLiteralParts.map(({ type, value }) => [type, value]),\n      );\n\n      // Apply the new values to the spinbuttons.\n      // Would not be necessary, if the spinbuttons would be controlled. But this is not possible because this\n      // interferes with the expected typing behavior for spinbuttons with format patterns like for this one used for the datetime parts.\n      nonLiteralParts.forEach((part) => {\n        const handler = handlers.get(part.type);\n        if (part.value === '') {\n          handler?.clearValue();\n        } else if (handler?.type === 'number') {\n          handler.applyText(part.value, true);\n        } else if (handler?.type === 'text') {\n          handler.searchValue(part.value[0], true);\n        }\n      });\n\n      // update the parts with new values\n      setParts((prevParts) => {\n        return prevParts.map((part) => {\n          const newValue = lookup.get(part.type);\n          return newValue !== undefined ? { ...part, value: newValue } : part;\n        });\n      });\n    },\n    [handlers],\n  );\n\n  // If the format, type or precision is changing, restore the prev. values when generating a set of new spinbuttons.\n  useEffect(() => {\n    setParts(() => (dateTime === null ? emptyParts : toParts(dateTime)));\n    // Need to update the parts on precision change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [emptyParts, toDateTime, toParts, precision]);\n\n  return {\n    spinButtons,\n    dateTime,\n    updateParts,\n    handlers,\n    parts,\n    toDateTime,\n  };\n}\n"],
+  "mappings": "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",
   "names": ["type", "value", "handlers", "spinButtons"]
 }

package/esm/forms/date-time-range-picker/DateRangeSelector.css

@@ -1,8 +1,8 @@
-._1uftu980-3-2-0 {
+._1uftu980-3-3-0 {
   cursor: not-allowed;
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1uftu981-3-2-0 {
+._1uftu981-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);
   transition-property: color, background-color, transform;

package/esm/forms/date-time-range-picker/DateRangeSelector.js

@@ -1,36 +1,20 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { TZDateMini } from "@date-fns/tz";
 import clsx from "clsx";
-import { endOfDay, startOfDay } from "date-fns";
 import { noop } from "lodash-es";
-import {
-  forwardRef,
-  useCallback,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useState,
-  useMemo
-} from "react";
+import { forwardRef, useImperativeHandle, useState, useMemo } from "react";
 import { useIntl } from "react-intl";
 import { CalendarIcon } from "@dynatrace/strato-icons";
-import { getTimezone } from "@dynatrace-sdk/user-preferences";
-import { SelectedOverCalendarContext } from "./contexts/SelectedOverCalendarContext.js";
 import * as styles from "./DateRangeSelector.sty.js";
-import { isEqualRangeSelection } from "./helpers.js";
 import { Button } from "../../buttons/button/Button.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { useFocusRing } from "../../core/styles/useFocusRing.js";
 import { useOverlayWithTrigger } from "../../overlays/hooks/useOverlayWithTrigger.js";
 import { Overlay } from "../../overlays/overlay/Overlay.js";
 import { globalSprinkles } from "../../styles/safe-sprinkles.js";
-import { Calendar } from "../calendar/Calendar.js";
+import { CalendarRoot } from "../calendar/CalendarRoot.js";
 import { FormFieldMessageContext } from "../forms-core/contexts/FormFieldMessageContext.js";
-import { removePrecision } from "../forms-core/time/timeParser.js";
 const DateRangeSelector = forwardRef((props, forwardedRef) => {
   const {
-    value,
-    onChange,
     disabled,
     readOnly,
     error,
@@ -39,77 +23,16 @@ const DateRangeSelector = forwardRef((props, forwardedRef) => {
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
-    min,
-    max,
-    errorFrom,
-    errorTo,
     "aria-disabled": ariaDisabledProp,
-    precision,
     ...remainingProps
   } = props;
   const [open, setOpen] = useState(false);
-  const [calendarValue, setCalendarValue] = useState(value);
   const intl = useIntl();
   const calendarTriggerLabel = intl.formatMessage({
     defaultMessage: "DateRangePicker calendar trigger",
     id: "K2M82PM/gcTo3fjq",
     description: "Text shown for the datetimerangepicker calendar trigger."
   });
-  const { setCalendarOnChangeFlag, setSelectedOverCalendar } = useContext(
-    SelectedOverCalendarContext
-  );
-  const updateCalendarValue = useCallback(
-    (newInternalValue) => {
-      if (readOnly) {
-        return;
-      }
-      if (!newInternalValue) {
-        onChange(null);
-      } else if (newInternalValue.from && newInternalValue.to) {
-        const timeZone = getTimezone();
-        const to = new TZDateMini(newInternalValue.to.absoluteDate, timeZone);
-        const from = new TZDateMini(
-          newInternalValue.from.absoluteDate,
-          timeZone
-        );
-        const isToAtEndOfDay = removePrecision(endOfDay(to).toISOString(), precision) === removePrecision(newInternalValue.to.absoluteDate, precision);
-        const isToAtMax = max === to.toISOString();
-        const isFromAtStartOfDay = removePrecision(startOfDay(from).toISOString(), precision) === removePrecision(newInternalValue.from.absoluteDate, precision);
-        const isFromAtMin = min === from.toISOString();
-        if ((isToAtEndOfDay || isToAtMax) && (isFromAtStartOfDay || isFromAtMin)) {
-          setCalendarOnChangeFlag?.(true);
-          setSelectedOverCalendar?.(true);
-        }
-        setOpen(false);
-        !isEqualRangeSelection(newInternalValue, value) && onChange(newInternalValue);
-      }
-      setCalendarValue(newInternalValue);
-    },
-    [
-      readOnly,
-      onChange,
-      precision,
-      value,
-      setCalendarOnChangeFlag,
-      setSelectedOverCalendar,
-      max,
-      min
-    ]
-  );
-  useEffect(() => {
-    setCalendarValue((prevValue) => {
-      if (errorTo === "invalid" && errorFrom === "invalid") {
-        return { from: null, to: null };
-      }
-      if (errorFrom === "invalid") {
-        return { from: null, to: value?.to || null };
-      }
-      if (errorTo === "invalid") {
-        return { from: value?.from || null, to: null };
-      }
-      return isEqualRangeSelection(prevValue, value) ? prevValue : value;
-    });
-  }, [errorFrom, errorTo, value]);
   const {
     targetRef,
     triggerRef,
@@ -192,19 +115,7 @@ const DateRangeSelector = forwardRef((props, forwardedRef) => {
         }),
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
-        children: /* @__PURE__ */ jsx(FormFieldMessageContext.Provider, { value: formFieldMessageContextValue, children: /* @__PURE__ */ jsx(
-          Calendar,
-          {
-            value: calendarValue?.from || calendarValue?.to ? calendarValue : null,
-            type: "range",
-            onChange: updateCalendarValue,
-            required: false,
-            min,
-            max,
-            "aria-disabled": ariaDisabledProp,
-            precision
-          }
-        ) })
+        children: /* @__PURE__ */ jsx(FormFieldMessageContext.Provider, { value: formFieldMessageContextValue, children: /* @__PURE__ */ jsx(CalendarRoot, { type: "range", "aria-disabled": ariaDisabledProp }) })
       }
     )
   ] });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateRangeSelector.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport clsx from 'clsx';\nimport { endOfDay, startOfDay } from 'date-fns';\nimport { noop } from 'lodash-es';\nimport {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useState,\n  useMemo,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport type { RequireAtLeastOne } from 'type-fest';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { SelectedOverCalendarContext } from './contexts/SelectedOverCalendarContext.js';\nimport * as styles from './DateRangeSelector.sty.js';\nimport { isEqualRangeSelection } from './helpers.js';\nimport type { DateRangeSelectorProps, DateRangeSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport type { Timeframe } from '../../core/types/time.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { Calendar } from '../calendar/Calendar.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport { removePrecision } from '../forms-core/time/timeParser.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateRangeSelector = forwardRef<\n  DateRangeSelectorRef,\n  DateRangeSelectorProps\n>((props, forwardedRef) => {\n  const {\n    value,\n    onChange,\n    disabled,\n    readOnly,\n    error,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    min,\n    max,\n    errorFrom,\n    errorTo,\n    'aria-disabled': ariaDisabledProp,\n    precision,\n    ...remainingProps\n  } = props;\n  const [open, setOpen] = useState(false);\n  const [calendarValue, setCalendarValue] = useState(value);\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'DateRangePicker calendar trigger',\n    id: 'K2M82PM/gcTo3fjq',\n    description: 'Text shown for the datetimerangepicker calendar trigger.',\n  });\n\n  const { setCalendarOnChangeFlag, setSelectedOverCalendar } = useContext(\n    SelectedOverCalendarContext,\n  );\n\n  // update calendar value state and call onChange if necessary\n  const updateCalendarValue = useCallback(\n    (newInternalValue: Timeframe | null) => {\n      if (readOnly) {\n        return;\n      }\n      if (!newInternalValue) {\n        onChange(null);\n      } else if (newInternalValue.from && newInternalValue.to) {\n        const timeZone = getTimezone();\n\n        // only change selectedOverCalendar when it is a full day\n        const to = new TZDateMini(newInternalValue.to.absoluteDate, timeZone);\n        const from = new TZDateMini(\n          newInternalValue.from.absoluteDate,\n          timeZone,\n        );\n\n        const isToAtEndOfDay =\n          removePrecision(endOfDay(to).toISOString(), precision) ===\n          removePrecision(newInternalValue.to.absoluteDate, precision);\n        const isToAtMax = max === to.toISOString();\n\n        const isFromAtStartOfDay =\n          removePrecision(startOfDay(from).toISOString(), precision) ===\n          removePrecision(newInternalValue.from.absoluteDate, precision);\n        const isFromAtMin = min === from.toISOString();\n\n        if (\n          (isToAtEndOfDay || isToAtMax) &&\n          (isFromAtStartOfDay || isFromAtMin)\n        ) {\n          setCalendarOnChangeFlag?.(true);\n          setSelectedOverCalendar?.(true);\n        }\n\n        setOpen(false);\n        !isEqualRangeSelection(newInternalValue, value) &&\n          onChange(newInternalValue);\n      }\n      setCalendarValue(newInternalValue);\n    },\n    [\n      readOnly,\n      onChange,\n      precision,\n      value,\n      setCalendarOnChangeFlag,\n      setSelectedOverCalendar,\n      max,\n      min,\n    ],\n  );\n\n  // apply controlled value update to the calendar value if necessary\n  useEffect(() => {\n    setCalendarValue((prevValue) => {\n      if (errorTo === 'invalid' && errorFrom === 'invalid') {\n        return { from: null, to: null };\n      }\n      if (errorFrom === 'invalid') {\n        return { from: null, to: value?.to || null };\n      }\n      if (errorTo === 'invalid') {\n        return { from: value?.from || null, to: null };\n      }\n      return isEqualRangeSelection(prevValue, value) ? prevValue : value;\n    });\n  }, [errorFrom, errorTo, value]);\n\n  const {\n    targetRef,\n    triggerRef,\n    overlayRef,\n    overlayState,\n    overlayProps,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    placement: 'bottom-end',\n    offset: 8,\n    shouldCloseOnBlur: false,\n    open,\n    onOpenChange: setOpen,\n    // the overlay should not open when disabled or readOnly\n    disabled: disabled || readOnly,\n  });\n\n  const rootRef = useMergeRefs<HTMLButtonElement | null>([\n    triggerRef,\n    targetRef,\n  ]);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): DateRangeSelectorRef => ({\n      open: () => setOpen(true),\n      close: () => setOpen(false),\n    }),\n    [],\n  );\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: false,\n    isMinimal: false,\n    disabled: disabled,\n    color: error ? 'critical' : 'neutral',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      dispatch: noop,\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        isDisabled: disabled,\n        showError: error,\n      },\n    }),\n    [error, disabled],\n  );\n\n  return (\n    <>\n      <Button\n        ref={rootRef}\n        data-testid={dataTestId}\n        className={clsx(styles.selector, focusClassName, consumerClassName, {\n          [styles.readOnly]: readOnly,\n        })}\n        style={consumerStyle}\n        aria-label={calendarTriggerLabel}\n        {...remainingProps}\n        {...overlayTriggerProps}\n        size=\"condensed\"\n        color={error ? 'critical' : 'neutral'}\n        disabled={disabled}\n        aria-disabled={ariaDisabledProp}\n        variant=\"emphasized\"\n        data-dt-name=\"ShowCalendar\"\n      >\n        <Button.Prefix>\n          <CalendarIcon />\n        </Button.Prefix>\n      </Button>\n      <Overlay\n        ref={overlayRef}\n        isOpen={overlayState.isOpen}\n        overlayProps={overlayProps}\n        className={globalSprinkles({\n          paddingLeft: 16,\n          paddingTop: 16,\n          paddingRight: 16,\n          paddingBottom: 16,\n        })}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n          <Calendar\n            value={\n              calendarValue?.from || calendarValue?.to\n                ? (calendarValue as RequireAtLeastOne<Timeframe>)\n                : null\n            }\n            type=\"range\"\n            onChange={updateCalendarValue}\n            required={false}\n            min={min}\n            max={max}\n            aria-disabled={ariaDisabledProp}\n            precision={precision}\n          />\n        </FormFieldMessageContext.Provider>\n      </Overlay>\n    </>\n  );\n});\n"],
-  "mappings": "AAmMI,mBAmBM,KAnBN;AAnMJ,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AACjB,SAAS,UAAU,kBAAkB;AACrC,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAGxB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAE5B,SAAS,mCAAmC;AAC5C,YAAY,YAAY;AACxB,SAAS,6BAA6B;AAEtC,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAE7B,SAAS,6BAA6B;AACtC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,+BAA+B;AACxC,SAAS,uBAAuB;AAKzB,MAAM,oBAAoB,WAG/B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,QAAM,OAAO,QAAQ;AACrB,QAAM,uBAAuB,KAAK,cAAc;AAAA,IAC9C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,QAAM,EAAE,yBAAyB,wBAAwB,IAAI;AAAA,IAC3D;AAAA,EACF;AAGA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,qBAAuC;AACtC,UAAI,UAAU;AACZ;AAAA,MACF;AACA,UAAI,CAAC,kBAAkB;AACrB,iBAAS,IAAI;AAAA,MACf,WAAW,iBAAiB,QAAQ,iBAAiB,IAAI;AACvD,cAAM,WAAW,YAAY;AAG7B,cAAM,KAAK,IAAI,WAAW,iBAAiB,GAAG,cAAc,QAAQ;AACpE,cAAM,OAAO,IAAI;AAAA,UACf,iBAAiB,KAAK;AAAA,UACtB;AAAA,QACF;AAEA,cAAM,iBACJ,gBAAgB,SAAS,EAAE,EAAE,YAAY,GAAG,SAAS,MACrD,gBAAgB,iBAAiB,GAAG,cAAc,SAAS;AAC7D,cAAM,YAAY,QAAQ,GAAG,YAAY;AAEzC,cAAM,qBACJ,gBAAgB,WAAW,IAAI,EAAE,YAAY,GAAG,SAAS,MACzD,gBAAgB,iBAAiB,KAAK,cAAc,SAAS;AAC/D,cAAM,cAAc,QAAQ,KAAK,YAAY;AAE7C,aACG,kBAAkB,eAClB,sBAAsB,cACvB;AACA,oCAA0B,IAAI;AAC9B,oCAA0B,IAAI;AAAA,QAChC;AAEA,gBAAQ,KAAK;AACb,SAAC,sBAAsB,kBAAkB,KAAK,KAC5C,SAAS,gBAAgB;AAAA,MAC7B;AACA,uBAAiB,gBAAgB;AAAA,IACnC;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,YAAU,MAAM;AACd,qBAAiB,CAAC,cAAc;AAC9B,UAAI,YAAY,aAAa,cAAc,WAAW;AACpD,eAAO,EAAE,MAAM,MAAM,IAAI,KAAK;AAAA,MAChC;AACA,UAAI,cAAc,WAAW;AAC3B,eAAO,EAAE,MAAM,MAAM,IAAI,OAAO,MAAM,KAAK;AAAA,MAC7C;AACA,UAAI,YAAY,WAAW;AACzB,eAAO,EAAE,MAAM,OAAO,QAAQ,MAAM,IAAI,KAAK;AAAA,MAC/C;AACA,aAAO,sBAAsB,WAAW,KAAK,IAAI,YAAY;AAAA,IAC/D,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,SAAS,KAAK,CAAC;AAE9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAAA,IACxB,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,mBAAmB;AAAA,IACnB;AAAA,IACA,cAAc;AAAA;AAAA,IAEd,UAAU,YAAY;AAAA,EACxB,CAAC;AAED,QAAM,UAAU,aAAuC;AAAA,IACrD;AAAA,IACA;AAAA,EACF,CAAC;AAED;AAAA,IACE;AAAA,IACA,OAA6B;AAAA,MAC3B,MAAM,MAAM,QAAQ,IAAI;AAAA,MACxB,OAAO,MAAM,QAAQ,KAAK;AAAA,IAC5B;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,EAAE,eAAe,IAAI,aAAa;AAAA,IACtC,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,OAAO,QAAQ,aAAa;AAAA,EAC9B,CAAC;AACD,QAAM,+BAA+B;AAAA,IACnC,OAAO;AAAA,MACL,UAAU;AAAA,MACV,OAAO;AAAA,QACL,gBAAgB,CAAC;AAAA,QACjB,qBAAqB,CAAC;AAAA,QACtB,YAAY;AAAA,QACZ,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAC,OAAO,QAAQ;AAAA,EAClB;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW,KAAK,OAAO,UAAU,gBAAgB,mBAAmB;AAAA,UAClE,CAAC,OAAO,QAAQ,GAAG;AAAA,QACrB,CAAC;AAAA,QACD,OAAO;AAAA,QACP,cAAY;AAAA,QACX,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,OAAO,QAAQ,aAAa;AAAA,QAC5B;AAAA,QACA,iBAAe;AAAA,QACf,SAAQ;AAAA,QACR,gBAAa;AAAA,QAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,QAAQ,aAAa;AAAA,QACrB;AAAA,QACA,WAAW,gBAAgB;AAAA,UACzB,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,cAAc;AAAA,UACd,eAAe;AAAA,QACjB,CAAC;AAAA,QACD,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAElB,8BAAC,wBAAwB,UAAxB,EAAiC,OAAO,8BACvC;AAAA,UAAC;AAAA;AAAA,YACC,OACE,eAAe,QAAQ,eAAe,KACjC,gBACD;AAAA,YAEN,MAAK;AAAA,YACL,UAAU;AAAA,YACV,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,iBAAe;AAAA,YACf;AAAA;AAAA,QACF,GACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { noop } from 'lodash-es';\nimport { forwardRef, useImperativeHandle, useState, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './DateRangeSelector.sty.js';\nimport type { DateRangeSelectorProps, DateRangeSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateRangeSelector = forwardRef<\n  DateRangeSelectorRef,\n  DateRangeSelectorProps\n>((props, forwardedRef) => {\n  const {\n    disabled,\n    readOnly,\n    error,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  } = props;\n  const [open, setOpen] = useState(false);\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'DateRangePicker calendar trigger',\n    id: 'K2M82PM/gcTo3fjq',\n    description: 'Text shown for the datetimerangepicker calendar trigger.',\n  });\n\n  const {\n    targetRef,\n    triggerRef,\n    overlayRef,\n    overlayState,\n    overlayProps,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    placement: 'bottom-end',\n    offset: 8,\n    shouldCloseOnBlur: false,\n    open,\n    onOpenChange: setOpen,\n    // the overlay should not open when disabled or readOnly\n    disabled: disabled || readOnly,\n  });\n\n  const rootRef = useMergeRefs<HTMLButtonElement | null>([\n    triggerRef,\n    targetRef,\n  ]);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): DateRangeSelectorRef => ({\n      open: () => setOpen(true),\n      close: () => setOpen(false),\n    }),\n    [],\n  );\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: false,\n    isMinimal: false,\n    disabled: disabled,\n    color: error ? 'critical' : 'neutral',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      dispatch: noop,\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        isDisabled: disabled,\n        showError: error,\n      },\n    }),\n    [error, disabled],\n  );\n\n  return (\n    <>\n      <Button\n        ref={rootRef}\n        data-testid={dataTestId}\n        className={clsx(styles.selector, focusClassName, consumerClassName, {\n          [styles.readOnly]: readOnly,\n        })}\n        style={consumerStyle}\n        aria-label={calendarTriggerLabel}\n        {...remainingProps}\n        {...overlayTriggerProps}\n        size=\"condensed\"\n        color={error ? 'critical' : 'neutral'}\n        disabled={disabled}\n        aria-disabled={ariaDisabledProp}\n        variant=\"emphasized\"\n        data-dt-name=\"ShowCalendar\"\n      >\n        <Button.Prefix>\n          <CalendarIcon />\n        </Button.Prefix>\n      </Button>\n      <Overlay\n        ref={overlayRef}\n        isOpen={overlayState.isOpen}\n        overlayProps={overlayProps}\n        className={globalSprinkles({\n          paddingLeft: 16,\n          paddingTop: 16,\n          paddingRight: 16,\n          paddingBottom: 16,\n        })}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n          <CalendarRoot type=\"range\" aria-disabled={ariaDisabledProp} />\n        </FormFieldMessageContext.Provider>\n      </Overlay>\n    </>\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import "./DateRangeSelector.css";
-var readOnly = "_1uftu980-3-2-0";
-var selector = "_1uftu981-3-2-0";
+var readOnly = "_1uftu980-3-3-0";
+var selector = "_1uftu981-3-3-0";
 export {
   readOnly,
   selector

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateRangeSelector.css.ts"],
-  "sourcesContent": ["import './DateRangeSelector.css';\nexport var readOnly = '_1uftu980-3-2-0';\nexport var selector = '_1uftu981-3-2-0';"],
+  "sourcesContent": ["import './DateRangeSelector.css';\nexport var readOnly = '_1uftu980-3-3-0';\nexport var selector = '_1uftu981-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,WAAW;",
   "names": []
 }