@dynatrace/strato-components 3.2.1 → 3.3.0

package/esm/filters/timeframe-selector/components/presets/RecentTimeframes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/presets/RecentTimeframes.tsx"],
-  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PresetItem } from './PresetItem.js';\nimport * as styles from './Presets.sty.js';\nimport { Divider } from '../../../../layouts/divider/Divider.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport { PresetItemContext } from '../../contexts/PresetItemContext.js';\nimport { getTimeframePresets } from '../../utils/presets-helpers.js';\nimport {\n  timeframeQueryClient,\n  TIMEFRAME_PRESETS_QUERY_KEY,\n} from '../../utils/TimeframePresetsClient.js';\n\n/**\n * A list of recently selected timeframes shown in the overlay.\n * @public\n */\nexport const RecentTimeframes = () => {\n  const intl = useIntl();\n\n  const { data, isLoading } = useQuery(\n    {\n      queryKey: TIMEFRAME_PRESETS_QUERY_KEY,\n      queryFn: getTimeframePresets,\n      notifyOnChangeProps: ['dataUpdatedAt'],\n    },\n    timeframeQueryClient,\n  );\n\n  const presetItemContextValue = useMemo(\n    () => ({ isRecent: true as const }),\n    [],\n  );\n\n  if (!data?.recentPresets?.length || isLoading) {\n    return null;\n  }\n\n  const ariaLabel = intl.formatMessage(\n    TIMEFRAME_SELECTOR_MESSAGES.recentTimeframesList,\n  );\n\n  return (\n    <>\n      <Divider flexItem={false} />\n      <div>\n        <Text textStyle=\"small\" className={styles.recentHeading} as=\"div\">\n          {intl.formatMessage(\n            TIMEFRAME_SELECTOR_MESSAGES.recentTimeframesHeading,\n          )}\n        </Text>\n        <ul\n          role=\"listbox\"\n          className={styles.listContainer}\n          aria-label={ariaLabel}\n        >\n          <PresetItemContext.Provider value={presetItemContextValue}>\n            {data.recentPresets.map(({ timeframe }) => (\n              <PresetItem\n                key={`${timeframe.from} \u2192 ${timeframe.to}`}\n                value={timeframe}\n                data-dt-name=\"Recent\"\n              />\n            ))}\n          </PresetItemContext.Provider>\n        </ul>\n      </div>\n    </>\n  );\n};\n\n(\n  RecentTimeframes as typeof RecentTimeframes & { displayName: string }\n).displayName = 'RecentTimeframes';\n"],
-  "mappings": "AA8CI,mBACE,KACA,YAFF;AA9CJ,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,SAAS,kBAAkB;AAC3B,YAAY,YAAY;AACxB,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAC5C,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAMA,MAAM,mBAAmB,MAAM;AACpC,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,MAAM,UAAU,IAAI;AAAA,IAC1B;AAAA,MACE,UAAU;AAAA,MACV,SAAS;AAAA,MACT,qBAAqB,CAAC,eAAe;AAAA,IACvC;AAAA,IACA;AAAA,EACF;AAEA,QAAM,yBAAyB;AAAA,IAC7B,OAAO,EAAE,UAAU,KAAc;AAAA,IACjC,CAAC;AAAA,EACH;AAEA,MAAI,CAAC,MAAM,eAAe,UAAU,WAAW;AAC7C,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,KAAK;AAAA,IACrB,4BAA4B;AAAA,EAC9B;AAEA,SACE,iCACE;AAAA,wBAAC,WAAQ,UAAU,OAAO;AAAA,IAC1B,qBAAC,SACC;AAAA,0BAAC,QAAK,WAAU,SAAQ,WAAW,OAAO,eAAe,IAAG,OACzD,eAAK;AAAA,QACJ,4BAA4B;AAAA,MAC9B,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW,OAAO;AAAA,UAClB,cAAY;AAAA,UAEZ,8BAAC,kBAAkB,UAAlB,EAA2B,OAAO,wBAChC,eAAK,cAAc,IAAI,CAAC,EAAE,UAAU,MACnC;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO;AAAA,cACP,gBAAa;AAAA;AAAA,YAFR,GAAG,UAAU,IAAI,WAAM,UAAU,EAAE;AAAA,UAG1C,CACD,GACH;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;AAGE,iBACA,cAAc;",
+  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PresetItem } from './PresetItem.js';\nimport * as styles from './Presets.sty.js';\nimport { Divider } from '../../../../layouts/divider/Divider.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport { PresetItemContext } from '../../contexts/PresetItemContext.js';\nimport { getTimeframePresets } from '../../utils/presets-helpers.js';\nimport {\n  timeframeQueryClient,\n  TIMEFRAME_PRESETS_QUERY_KEY,\n} from '../../utils/TimeframePresetsClient.js';\n\n/**\n * A list of recently selected timeframes shown in the overlay.\n * @public\n */\nexport const RecentTimeframes = () => {\n  const intl = useIntl();\n\n  const { data, isLoading } = useQuery(\n    {\n      queryKey: TIMEFRAME_PRESETS_QUERY_KEY,\n      queryFn: getTimeframePresets,\n      notifyOnChangeProps: ['dataUpdatedAt'],\n    },\n    timeframeQueryClient,\n  );\n\n  const presetItemContextValue = useMemo(\n    () => ({ isRecent: true as const }),\n    [],\n  );\n\n  if (!data?.recentPresets?.length || isLoading) {\n    return null;\n  }\n\n  const ariaLabel = intl.formatMessage(\n    TIMEFRAME_SELECTOR_MESSAGES.recentTimeframesList,\n  );\n\n  return (\n    <>\n      <Divider flexItem={false} />\n      <div>\n        <Text textStyle=\"small\" className={styles.recentHeading} as=\"div\">\n          {intl.formatMessage(\n            TIMEFRAME_SELECTOR_MESSAGES.recentTimeframesHeading,\n          )}\n        </Text>\n        <ul\n          role=\"listbox\"\n          className={styles.listContainer}\n          aria-label={ariaLabel}\n        >\n          <PresetItemContext.Provider value={presetItemContextValue}>\n            {data.recentPresets.map(({ timeframe }, index) => (\n              <PresetItem\n                key={`${timeframe.from} \u2192 ${timeframe.to}`}\n                value={timeframe}\n                data-dt-name=\"Recent\"\n                data-dt-properties={`index:${index},valueFrom:${timeframe.from},valueTo:${timeframe.to}`}\n              />\n            ))}\n          </PresetItemContext.Provider>\n        </ul>\n      </div>\n    </>\n  );\n};\n\n(\n  RecentTimeframes as typeof RecentTimeframes & { displayName: string }\n).displayName = 'RecentTimeframes';\n"],
+  "mappings": "AA8CI,mBACE,KACA,YAFF;AA9CJ,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,SAAS,kBAAkB;AAC3B,YAAY,YAAY;AACxB,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAC5C,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAMA,MAAM,mBAAmB,MAAM;AACpC,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,MAAM,UAAU,IAAI;AAAA,IAC1B;AAAA,MACE,UAAU;AAAA,MACV,SAAS;AAAA,MACT,qBAAqB,CAAC,eAAe;AAAA,IACvC;AAAA,IACA;AAAA,EACF;AAEA,QAAM,yBAAyB;AAAA,IAC7B,OAAO,EAAE,UAAU,KAAc;AAAA,IACjC,CAAC;AAAA,EACH;AAEA,MAAI,CAAC,MAAM,eAAe,UAAU,WAAW;AAC7C,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,KAAK;AAAA,IACrB,4BAA4B;AAAA,EAC9B;AAEA,SACE,iCACE;AAAA,wBAAC,WAAQ,UAAU,OAAO;AAAA,IAC1B,qBAAC,SACC;AAAA,0BAAC,QAAK,WAAU,SAAQ,WAAW,OAAO,eAAe,IAAG,OACzD,eAAK;AAAA,QACJ,4BAA4B;AAAA,MAC9B,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW,OAAO;AAAA,UAClB,cAAY;AAAA,UAEZ,8BAAC,kBAAkB,UAAlB,EAA2B,OAAO,wBAChC,eAAK,cAAc,IAAI,CAAC,EAAE,UAAU,GAAG,UACtC;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO;AAAA,cACP,gBAAa;AAAA,cACb,sBAAoB,SAAS,KAAK,cAAc,UAAU,IAAI,YAAY,UAAU,EAAE;AAAA;AAAA,YAHjF,GAAG,UAAU,IAAI,WAAM,UAAU,EAAE;AAAA,UAI1C,CACD,GACH;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;AAGE,iBACA,cAAc;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/stepper/StepperButton.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 import {
   ChevronLeftSmallIcon,
@@ -7,9 +7,9 @@ import {
 } from "@dynatrace/strato-icons";
 import { StepperButtonTooltip } from "./StepperButtonTooltip.js";
 import { Button } from "../../../../buttons/button/Button.js";
-import { SelectedOverCalendarContext } from "../../../../forms/date-time-range-picker/contexts/SelectedOverCalendarContext.js";
-import { removePrecision } from "../../../../forms/forms-core/time/timeParser.js";
-import { useInternalTimeframeSelectorContext } from "../../hooks/useInternalTimeframeSelectorContext.js";
+import { isFullTimeframe } from "../../../../core/time/helpers.js";
+import { useTimeframeSelectorStore } from "../../../../core/time/timeframeStore/useTimeframeStore.js";
+import { useTimeframeSelectorContext } from "../../hooks/useTimeframeSelectorContext.js";
 import {
   formatStepperValues,
   getTimeShift
@@ -20,6 +20,9 @@ import {
   isSmallerThan
 } from "../../utils/timeframe-selection.js";
 function isStepperDisabled(direction, value, min, max) {
+  if (!value) {
+    return false;
+  }
   if (direction === "backward") {
     const nextStepIsValid = isSmallerThan(value.from.absoluteDate, min) || dateIsMinMax(value.from, min);
     return nextStepIsValid;
@@ -32,24 +35,30 @@ function isStepperDisabled(direction, value, min, max) {
 }
 const StepperButton = (props) => {
   const {
-    value,
     disabled,
     direction,
     "aria-disabled": ariaDisabledProp,
-    onChange,
-    onBlur
+    onBlur,
+    readOnly
   } = props;
+  const { showError } = useTimeframeSelectorContext();
+  const precision = useTimeframeSelectorStore((state) => state.precision);
+  const min = useTimeframeSelectorStore((state) => state.min)?.value;
+  const max = useTimeframeSelectorStore((state) => state.max)?.value;
+  const isFullDay = useTimeframeSelectorStore((state) => state.isFullDay);
+  const setTimeframeSelectorTimeframe = useTimeframeSelectorStore(
+    (state) => state.setStepperValue
+  );
+  const value = useTimeframeSelectorStore(
+    (state) => state.timeframeSelectorTimeframe
+  );
+  const referenceTimeframe = useTimeframeSelectorStore(
+    (state) => state.referenceTimeframe
+  );
+  const setReferenceTimeframe = useTimeframeSelectorStore(
+    (state) => state.setReferenceTimeframe
+  );
   const [shiftValue, setShiftValue] = useState(value);
-  const {
-    min: contextMin,
-    max: contextMax,
-    showError,
-    readOnly,
-    precision
-  } = useInternalTimeframeSelectorContext();
-  const min = contextMin && removePrecision(contextMin, precision);
-  const max = contextMax && removePrecision(contextMax, precision);
-  const { selectedOverCalendar } = useContext(SelectedOverCalendarContext);
   const [isDisabled, setIsDisabled] = useState(
     isStepperDisabled(direction, value, min, max)
   );
@@ -59,52 +68,62 @@ const StepperButton = (props) => {
       direction,
       min,
       max,
-      selectedOverCalendar,
+      selectedOverCalendar: isFullDay,
       precision
     });
     if (newShiftValue) {
       setShiftValue(newShiftValue);
     }
-  }, [direction, value, min, max, selectedOverCalendar, isDisabled, precision]);
+  }, [direction, value, min, max, isFullDay, isDisabled, precision]);
   const handleShift = useCallback(() => {
-    const newShiftValue = getTimeShift(value, {
+    const newShiftValue = getTimeShift(referenceTimeframe ?? value, {
       direction,
       min,
       max,
-      selectedOverCalendar,
+      selectedOverCalendar: isFullDay,
       precision
     });
     if (newShiftValue && !readOnly) {
-      onChange?.(
-        newShiftValue,
-        direction === "backward" ? dateIsMinMax(newShiftValue.from, min, max) : dateIsMinMax(newShiftValue.to, min, max)
-      );
+      const isAtMinOrMax = direction === "backward" ? dateIsMinMax(newShiftValue?.from, min, max) : dateIsMinMax(newShiftValue?.to, min, max);
+      if (referenceTimeframe && isFullTimeframe(referenceTimeframe)) {
+        setTimeframeSelectorTimeframe(referenceTimeframe);
+        setReferenceTimeframe(null);
+        return;
+      }
+      if (isAtMinOrMax) {
+        setReferenceTimeframe(value);
+      }
+      setTimeframeSelectorTimeframe(newShiftValue);
     }
   }, [
     value,
     direction,
     min,
     max,
-    selectedOverCalendar,
+    isFullDay,
     precision,
     readOnly,
-    onChange
+    referenceTimeframe,
+    setReferenceTimeframe,
+    setTimeframeSelectorTimeframe
   ]);
   const intl = useIntl();
   const dataDtName = direction === "backward" ? "StepBackward" : "StepForward";
+  if (!value || !shiftValue) {
+    return null;
+  }
   const formattedStepperValue = formatStepperValues(
     shiftValue.from,
     shiftValue.to,
     intl,
     direction,
-    selectedOverCalendar
+    isFullDay
   );
   return /* @__PURE__ */ jsx(
     StepperButtonTooltip,
     {
       disabled: disabled || isDisabled,
       value: shiftValue,
-      precision,
       formattedStepperValue,
       children: /* @__PURE__ */ jsx(
         Button,

package/esm/filters/timeframe-selector/components/stepper/StepperButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/stepper/StepperButton.tsx"],
-  "sourcesContent": ["import { useCallback, useContext, useEffect, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronLeftSmallIcon,\n  ChevronRightSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport { StepperButtonTooltip } from './StepperButtonTooltip.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport type { FormControlBaseProps } from '../../../../core/types/form-control-props.js';\nimport type { Timeframe } from '../../../../core/types/time.js';\nimport { SelectedOverCalendarContext } from '../../../../forms/date-time-range-picker/contexts/SelectedOverCalendarContext.js';\nimport { removePrecision } from '../../../../forms/forms-core/time/timeParser.js';\nimport { useInternalTimeframeSelectorContext } from '../../hooks/useInternalTimeframeSelectorContext.js';\nimport {\n  formatStepperValues,\n  getTimeShift,\n} from '../../utils/stepper-helpers.js';\nimport {\n  dateIsMinMax,\n  isBiggerThan,\n  isSmallerThan,\n} from '../../utils/timeframe-selection.js';\n\n//#region Typings\ninterface TimeframeStepperProps\n  extends FormControlBaseProps<\n    (timeframe: Timeframe, isMinOrMax: boolean) => void\n  > {\n  /** The value of the timeframe selector, containing the 'from' and 'to' timeframe details. */\n  value: Timeframe;\n  /** The direction the timeframe will be shifted to. */\n  direction: 'backward' | 'forward';\n  /**  Callback function to handle value changes. */\n  onChange: (timeframe: Timeframe, isMinOrMax: boolean) => void;\n  /**  Callback function to handle on blur events. */\n  onBlur?: () => void;\n}\n//#endregion\n\nfunction isStepperDisabled(\n  direction: TimeframeStepperProps['direction'],\n  value: TimeframeStepperProps['value'],\n  min?: string,\n  max?: string,\n): boolean {\n  if (direction === 'backward') {\n    const nextStepIsValid =\n      isSmallerThan(value.from.absoluteDate, min) ||\n      dateIsMinMax(value.from, min);\n\n    return nextStepIsValid;\n  }\n\n  if (direction === 'forward') {\n    const nextStepIsValid =\n      isBiggerThan(value.to.absoluteDate, max) ||\n      dateIsMinMax(value.to, undefined, max);\n\n    return nextStepIsValid;\n  }\n\n  return false;\n}\n\n/**\n * StepperButton component to shift the timeframe backward and forward.\n * @internal\n */\nexport const StepperButton = (props: TimeframeStepperProps) => {\n  const {\n    value,\n    disabled,\n    direction,\n    'aria-disabled': ariaDisabledProp,\n    onChange,\n    onBlur,\n  }: TimeframeStepperProps = props;\n\n  const [shiftValue, setShiftValue] = useState<Timeframe>(value);\n  const {\n    min: contextMin,\n    max: contextMax,\n    showError,\n    readOnly,\n    precision,\n  } = useInternalTimeframeSelectorContext();\n  const min = contextMin && removePrecision(contextMin, precision);\n  const max = contextMax && removePrecision(contextMax, precision);\n\n  const { selectedOverCalendar } = useContext(SelectedOverCalendarContext);\n\n  const [isDisabled, setIsDisabled] = useState(\n    isStepperDisabled(direction, value, min, max),\n  );\n\n  /** Handle value change. */\n  useEffect(() => {\n    setIsDisabled(isStepperDisabled(direction, value, min, max));\n\n    const newShiftValue = getTimeShift(value, {\n      direction,\n      min,\n      max,\n      selectedOverCalendar,\n      precision,\n    });\n\n    if (newShiftValue) {\n      setShiftValue(newShiftValue);\n    }\n  }, [direction, value, min, max, selectedOverCalendar, isDisabled, precision]);\n\n  /** Handle onClick. */\n  const handleShift = useCallback(() => {\n    const newShiftValue = getTimeShift(value, {\n      direction,\n      min,\n      max,\n      selectedOverCalendar,\n      precision,\n    });\n\n    if (newShiftValue && !readOnly) {\n      onChange?.(\n        newShiftValue,\n        direction === 'backward'\n          ? dateIsMinMax(newShiftValue.from, min, max)\n          : dateIsMinMax(newShiftValue.to, min, max),\n      );\n    }\n  }, [\n    value,\n    direction,\n    min,\n    max,\n    selectedOverCalendar,\n    precision,\n    readOnly,\n    onChange,\n  ]);\n\n  const intl = useIntl();\n\n  const dataDtName = direction === 'backward' ? 'StepBackward' : 'StepForward';\n\n  const formattedStepperValue = formatStepperValues(\n    shiftValue.from,\n    shiftValue.to,\n    intl,\n    direction,\n    selectedOverCalendar,\n  );\n\n  return (\n    <StepperButtonTooltip\n      disabled={disabled || isDisabled}\n      value={shiftValue}\n      precision={precision}\n      formattedStepperValue={formattedStepperValue}\n    >\n      <Button\n        style={{ minWidth: 'fit-content' }}\n        variant=\"emphasized\"\n        color={showError ? 'critical' : 'neutral'}\n        disabled={disabled || isDisabled}\n        onClick={handleShift}\n        aria-disabled={ariaDisabledProp}\n        aria-label={formattedStepperValue}\n        onBlur={onBlur}\n        data-dt-name={dataDtName}\n      >\n        {direction === 'backward' ? (\n          <ChevronLeftSmallIcon />\n        ) : (\n          <ChevronRightSmallIcon />\n        )}\n      </Button>\n    </StepperButtonTooltip>\n  );\n};\n\n(StepperButton as typeof StepperButton & { displayName: string }).displayName =\n  'TimeframeStepperButton';\n"],
-  "mappings": "AA8KU;AA9KV,SAAS,aAAa,YAAY,WAAW,gBAAgB;AAC7D,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,4BAA4B;AACrC,SAAS,cAAc;AAGvB,SAAS,mCAAmC;AAC5C,SAAS,uBAAuB;AAChC,SAAS,2CAA2C;AACpD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAkBP,SAAS,kBACP,WACA,OACA,KACA,KACS;AACT,MAAI,cAAc,YAAY;AAC5B,UAAM,kBACJ,cAAc,MAAM,KAAK,cAAc,GAAG,KAC1C,aAAa,MAAM,MAAM,GAAG;AAE9B,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,WAAW;AAC3B,UAAM,kBACJ,aAAa,MAAM,GAAG,cAAc,GAAG,KACvC,aAAa,MAAM,IAAI,QAAW,GAAG;AAEvC,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAMO,MAAM,gBAAgB,CAAC,UAAiC;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,EACF,IAA2B;AAE3B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAoB,KAAK;AAC7D,QAAM;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oCAAoC;AACxC,QAAM,MAAM,cAAc,gBAAgB,YAAY,SAAS;AAC/D,QAAM,MAAM,cAAc,gBAAgB,YAAY,SAAS;AAE/D,QAAM,EAAE,qBAAqB,IAAI,WAAW,2BAA2B;AAEvE,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,kBAAkB,WAAW,OAAO,KAAK,GAAG;AAAA,EAC9C;AAGA,YAAU,MAAM;AACd,kBAAc,kBAAkB,WAAW,OAAO,KAAK,GAAG,CAAC;AAE3D,UAAM,gBAAgB,aAAa,OAAO;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,QAAI,eAAe;AACjB,oBAAc,aAAa;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,WAAW,OAAO,KAAK,KAAK,sBAAsB,YAAY,SAAS,CAAC;AAG5E,QAAM,cAAc,YAAY,MAAM;AACpC,UAAM,gBAAgB,aAAa,OAAO;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,QAAI,iBAAiB,CAAC,UAAU;AAC9B;AAAA,QACE;AAAA,QACA,cAAc,aACV,aAAa,cAAc,MAAM,KAAK,GAAG,IACzC,aAAa,cAAc,IAAI,KAAK,GAAG;AAAA,MAC7C;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,OAAO,QAAQ;AAErB,QAAM,aAAa,cAAc,aAAa,iBAAiB;AAE/D,QAAM,wBAAwB;AAAA,IAC5B,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,YAAY;AAAA,MACtB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,EAAE,UAAU,cAAc;AAAA,UACjC,SAAQ;AAAA,UACR,OAAO,YAAY,aAAa;AAAA,UAChC,UAAU,YAAY;AAAA,UACtB,SAAS;AAAA,UACT,iBAAe;AAAA,UACf,cAAY;AAAA,UACZ;AAAA,UACA,gBAAc;AAAA,UAEb,wBAAc,aACb,oBAAC,wBAAqB,IAEtB,oBAAC,yBAAsB;AAAA;AAAA,MAE3B;AAAA;AAAA,EACF;AAEJ;AAEC,cAAiE,cAChE;",
+  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronLeftSmallIcon,\n  ChevronRightSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport { StepperButtonTooltip } from './StepperButtonTooltip.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { isFullTimeframe } from '../../../../core/time/helpers.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { FormControlBaseProps } from '../../../../core/types/form-control-props.js';\nimport { Timeframe } from '../../../../core/types/time.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\nimport {\n  formatStepperValues,\n  getTimeShift,\n} from '../../utils/stepper-helpers.js';\nimport {\n  dateIsMinMax,\n  isBiggerThan,\n  isSmallerThan,\n} from '../../utils/timeframe-selection.js';\n\n//#region Typings\ninterface TimeframeStepperProps\n  extends FormControlBaseProps<\n    (timeframe: Timeframe, isMinOrMax: boolean) => void\n  > {\n  /** The direction the timeframe will be shifted to. */\n  direction: 'backward' | 'forward';\n  /**  Callback function to handle on blur events. */\n  onBlur?: () => void;\n}\n//#endregion\n\nfunction isStepperDisabled(\n  direction: TimeframeStepperProps['direction'],\n  value: Timeframe | null,\n  min?: string,\n  max?: string,\n): boolean {\n  if (!value) {\n    return false;\n  }\n\n  if (direction === 'backward') {\n    const nextStepIsValid =\n      isSmallerThan(value.from.absoluteDate, min) ||\n      dateIsMinMax(value.from, min);\n\n    return nextStepIsValid;\n  }\n\n  if (direction === 'forward') {\n    const nextStepIsValid =\n      isBiggerThan(value.to.absoluteDate, max) ||\n      dateIsMinMax(value.to, undefined, max);\n\n    return nextStepIsValid;\n  }\n\n  return false;\n}\n\n/**\n * StepperButton component to shift the timeframe backward and forward.\n * @internal\n */\nexport const StepperButton = (props: TimeframeStepperProps) => {\n  const {\n    disabled,\n    direction,\n    'aria-disabled': ariaDisabledProp,\n    onBlur,\n    readOnly,\n  }: TimeframeStepperProps = props;\n\n  const { showError } = useTimeframeSelectorContext();\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n  const min = useTimeframeSelectorStore((state) => state.min)?.value;\n  const max = useTimeframeSelectorStore((state) => state.max)?.value;\n  const isFullDay = useTimeframeSelectorStore((state) => state.isFullDay);\n  const setTimeframeSelectorTimeframe = useTimeframeSelectorStore(\n    (state) => state.setStepperValue,\n  );\n  const value = useTimeframeSelectorStore(\n    (state) => state.timeframeSelectorTimeframe,\n  );\n  const referenceTimeframe = useTimeframeSelectorStore(\n    (state) => state.referenceTimeframe,\n  );\n  const setReferenceTimeframe = useTimeframeSelectorStore(\n    (state) => state.setReferenceTimeframe,\n  );\n\n  const [shiftValue, setShiftValue] = useState<Timeframe | null>(value);\n\n  const [isDisabled, setIsDisabled] = useState(\n    isStepperDisabled(direction, value, min, max),\n  );\n\n  /** Handle value change. */\n  useEffect(() => {\n    setIsDisabled(isStepperDisabled(direction, value, min, max));\n\n    const newShiftValue = getTimeShift(value, {\n      direction,\n      min,\n      max,\n      selectedOverCalendar: isFullDay,\n      precision,\n    });\n\n    if (newShiftValue) {\n      setShiftValue(newShiftValue);\n    }\n  }, [direction, value, min, max, isFullDay, isDisabled, precision]);\n\n  /** Handle onClick. */\n  const handleShift = useCallback(() => {\n    // In case we have a referenceTimeframe, it means we are currently at a min or max value and want to restore\n    // the previous timeframe when shifting back in the opposite direction. If there is no referenceTimeframe,\n    // we just calculate the next step based on the current value as usual.\n    const newShiftValue = getTimeShift(referenceTimeframe ?? value, {\n      direction,\n      min,\n      max,\n      selectedOverCalendar: isFullDay,\n      precision,\n    });\n\n    if (newShiftValue && !readOnly) {\n      const isAtMinOrMax =\n        direction === 'backward'\n          ? dateIsMinMax(newShiftValue?.from, min, max)\n          : dateIsMinMax(newShiftValue?.to, min, max);\n\n      if (referenceTimeframe && isFullTimeframe(referenceTimeframe)) {\n        setTimeframeSelectorTimeframe(referenceTimeframe);\n        setReferenceTimeframe(null);\n        return;\n      }\n\n      if (isAtMinOrMax) {\n        // In this case, moving to the minimum or maximum value means we can't maintain the original timeframe length.\n        // Therefore, we store the previous timeframe so we can restore it when moving back in the opposite direction.\n        setReferenceTimeframe(value);\n      }\n      setTimeframeSelectorTimeframe(newShiftValue);\n    }\n  }, [\n    value,\n    direction,\n    min,\n    max,\n    isFullDay,\n    precision,\n    readOnly,\n    referenceTimeframe,\n    setReferenceTimeframe,\n    setTimeframeSelectorTimeframe,\n  ]);\n\n  const intl = useIntl();\n\n  const dataDtName = direction === 'backward' ? 'StepBackward' : 'StepForward';\n\n  if (!value || !shiftValue) {\n    return null;\n  }\n\n  const formattedStepperValue = formatStepperValues(\n    shiftValue.from,\n    shiftValue.to,\n    intl,\n    direction,\n    isFullDay,\n  );\n\n  return (\n    <StepperButtonTooltip\n      disabled={disabled || isDisabled}\n      value={shiftValue}\n      formattedStepperValue={formattedStepperValue}\n    >\n      <Button\n        style={{ minWidth: 'fit-content' }}\n        variant=\"emphasized\"\n        color={showError ? 'critical' : 'neutral'}\n        disabled={disabled || isDisabled}\n        onClick={handleShift}\n        aria-disabled={ariaDisabledProp}\n        aria-label={formattedStepperValue}\n        onBlur={onBlur}\n        data-dt-name={dataDtName}\n      >\n        {direction === 'backward' ? (\n          <ChevronLeftSmallIcon />\n        ) : (\n          <ChevronRightSmallIcon />\n        )}\n      </Button>\n    </StepperButtonTooltip>\n  );\n};\n\n(StepperButton as typeof StepperButton & { displayName: string }).displayName =\n  'TimeframeStepperButton';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/filters/timeframe-selector/components/stepper/StepperButtonTooltip.js

@@ -8,13 +8,12 @@ const StepperButtonTooltip = (props) => {
     value,
     disabled,
     children,
-    precision,
     formattedStepperValue
   } = props;
-  const { tooltipFormattedTimeValueStart, tooltipFormattedTimeValueEnd } = useTooltipMessages(
-    { from: value?.from.value ?? "", to: value?.to.value ?? "" },
-    precision
-  );
+  const { tooltipFormattedTimeValueStart, tooltipFormattedTimeValueEnd } = useTooltipMessages({
+    from: value?.from.value ?? "",
+    to: value?.to.value ?? ""
+  });
   return /* @__PURE__ */ jsx(
     Tooltip,
     {

package/esm/filters/timeframe-selector/components/stepper/StepperButtonTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/stepper/StepperButtonTooltip.tsx"],
-  "sourcesContent": ["import type { ReactElement } from 'react';\n\nimport type { FormControlBaseProps } from '../../../../core/types/form-control-props.js';\nimport type { Timeframe } from '../../../../core/types/time.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { useTooltipMessages } from '../../hooks/useTooltipMessages.js';\n\n//#region Typings\ninterface StepperButtonTooltipProps extends FormControlBaseProps {\n  /** Single child of the tooltip considered to trigger the tooltip element. */\n  children: ReactElement;\n  /** The value of the timeframe selector, containing the 'from' and 'to' timeframe details. */\n  value: Timeframe;\n  /** The precision of the time shown in the tooltip .*/\n  precision?: 'minutes' | 'seconds' | 'milliseconds';\n  /** String of the value formatted to a display value. */\n  formattedStepperValue: string;\n}\n//#endregion\n\n/**\n * StepperButtonTooltip component to shift the timeframe backward and forward.\n * @internal\n */\nexport const StepperButtonTooltip = (props: StepperButtonTooltipProps) => {\n  const {\n    value,\n    disabled,\n    children,\n    precision,\n    formattedStepperValue,\n  }: StepperButtonTooltipProps = props;\n\n  const { tooltipFormattedTimeValueStart, tooltipFormattedTimeValueEnd } =\n    useTooltipMessages(\n      { from: value?.from.value ?? '', to: value?.to.value ?? '' },\n      precision,\n    );\n\n  return (\n    <Tooltip\n      text={\n        <Flex flexDirection=\"column\" gap={0}>\n          <Text textStyle=\"small-emphasized\">{formattedStepperValue}</Text>\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueStart}</Text>\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueEnd}</Text>\n        </Flex>\n      }\n      placement=\"top\"\n      fallbackPlacements={['top-end', 'bottom', 'bottom-end', 'right', 'left']}\n      disabled={disabled}\n    >\n      {children}\n    </Tooltip>\n  );\n};\n\n(\n  StepperButtonTooltip as typeof StepperButtonTooltip & { displayName: string }\n).displayName = 'TimeframeStepperTooltip';\n"],
-  "mappings": "AA4CQ,SACE,KADF;AAxCR,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,0BAA0B;AAmB5B,MAAM,uBAAuB,CAAC,UAAqC;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAA+B;AAE/B,QAAM,EAAE,gCAAgC,6BAA6B,IACnE;AAAA,IACE,EAAE,MAAM,OAAO,KAAK,SAAS,IAAI,IAAI,OAAO,GAAG,SAAS,GAAG;AAAA,IAC3D;AAAA,EACF;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MACE,qBAAC,QAAK,eAAc,UAAS,KAAK,GAChC;AAAA,4BAAC,QAAK,WAAU,oBAAoB,iCAAsB;AAAA,QAC1D,oBAAC,QAAK,WAAU,SAAS,0CAA+B;AAAA,QACxD,oBAAC,QAAK,WAAU,SAAS,wCAA6B;AAAA,SACxD;AAAA,MAEF,WAAU;AAAA,MACV,oBAAoB,CAAC,WAAW,UAAU,cAAc,SAAS,MAAM;AAAA,MACvE;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAGE,qBACA,cAAc;",
+  "sourcesContent": ["import type { ReactElement } from 'react';\n\nimport type { FormControlBaseProps } from '../../../../core/types/form-control-props.js';\nimport type { Timeframe } from '../../../../core/types/time.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { useTooltipMessages } from '../../hooks/useTooltipMessages.js';\n\n//#region Typings\ninterface StepperButtonTooltipProps extends FormControlBaseProps {\n  /** Single child of the tooltip considered to trigger the tooltip element. */\n  children: ReactElement;\n  /** The value of the timeframe selector, containing the 'from' and 'to' timeframe details. */\n  value: Timeframe;\n  /** String of the value formatted to a display value. */\n  formattedStepperValue: string;\n}\n//#endregion\n\n/**\n * StepperButtonTooltip component to shift the timeframe backward and forward.\n * @internal\n */\nexport const StepperButtonTooltip = (props: StepperButtonTooltipProps) => {\n  const {\n    value,\n    disabled,\n    children,\n    formattedStepperValue,\n  }: StepperButtonTooltipProps = props;\n\n  const { tooltipFormattedTimeValueStart, tooltipFormattedTimeValueEnd } =\n    useTooltipMessages({\n      from: value?.from.value ?? '',\n      to: value?.to.value ?? '',\n    });\n\n  return (\n    <Tooltip\n      text={\n        <Flex flexDirection=\"column\" gap={0}>\n          <Text textStyle=\"small-emphasized\">{formattedStepperValue}</Text>\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueStart}</Text>\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueEnd}</Text>\n        </Flex>\n      }\n      placement=\"top\"\n      fallbackPlacements={['top-end', 'bottom', 'bottom-end', 'right', 'left']}\n      disabled={disabled}\n    >\n      {children}\n    </Tooltip>\n  );\n};\n\n(\n  StepperButtonTooltip as typeof StepperButtonTooltip & { displayName: string }\n).displayName = 'TimeframeStepperTooltip';\n"],
+  "mappings": "AAyCQ,SACE,KADF;AArCR,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,0BAA0B;AAiB5B,MAAM,uBAAuB,CAAC,UAAqC;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAA+B;AAE/B,QAAM,EAAE,gCAAgC,6BAA6B,IACnE,mBAAmB;AAAA,IACjB,MAAM,OAAO,KAAK,SAAS;AAAA,IAC3B,IAAI,OAAO,GAAG,SAAS;AAAA,EACzB,CAAC;AAEH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MACE,qBAAC,QAAK,eAAc,UAAS,KAAK,GAChC;AAAA,4BAAC,QAAK,WAAU,oBAAoB,iCAAsB;AAAA,QAC1D,oBAAC,QAAK,WAAU,SAAS,0CAA+B;AAAA,QACxD,oBAAC,QAAK,WAAU,SAAS,wCAA6B;AAAA,SACxD;AAAA,MAEF,WAAU;AAAA,MACV,oBAAoB,CAAC,WAAW,UAAU,cAAc,SAAS,MAAM;AAAA,MACvE;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAGE,qBACA,cAAc;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/trigger/CustomTrigger.js

@@ -4,28 +4,28 @@ import {
 } from "react";
 import { isElement } from "react-is";
 import { mergeProps } from "../../../../core/utils/merge-props.js";
-import { useFormFieldMessagesContext } from "../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js";
 import { useTimeframeSelectorContext } from "../../hooks/useTimeframeSelectorContext.js";
 function isTimeframeSelectorCustomTriggerElement(child) {
   return isElement(child) && child.type === CustomTrigger;
 }
 const CustomTrigger = (props) => {
   const { children, ...remainingProps } = props;
-  const { triggerProps, displayValue, hint } = useTimeframeSelectorContext();
-  const {
-    state: { isValid }
-  } = useFormFieldMessagesContext();
+  const { triggerProps, displayValue, hint, showError } = useTimeframeSelectorContext();
   const dtComponentName = triggerProps?.["data-dt-component"];
   if (isValidElement(children)) {
     return cloneElement(children, {
-      ...mergeProps(triggerProps, remainingProps, children.props, {
-        "data-dt-component": dtComponentName
-      })
+      ...mergeProps(
+        triggerProps,
+        { color: showError ? "critical" : void 0 },
+        remainingProps,
+        children.props,
+        { "data-dt-component": dtComponentName }
+      )
     });
   }
   if (typeof children === "function") {
     return children(
-      { displayValue, isInvalid: !isValid, hint },
+      { displayValue, isInvalid: showError, hint },
       mergeProps(triggerProps, remainingProps)
     );
   }

package/esm/filters/timeframe-selector/components/trigger/CustomTrigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/trigger/CustomTrigger.tsx"],
-  "sourcesContent": ["import {\n  isValidElement,\n  type AnchorHTMLAttributes,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  cloneElement,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport type {\n  AriaButtonProps,\n  ButtonAria,\n} from '../../../../buttons/button/types/button-aria.js';\nimport { AriaLabelingProps } from '../../../../core/types/a11y-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\n\n/**\n * @public\n */\nexport type TimeframeSelectorCustomTriggerProps = AriaLabelingProps &\n  StylingProps &\n  DataTestId & {\n    /** Elements to be displayed in the CustomTrigger. */\n    children:\n      | ReactNode\n      | undefined\n      | ((\n          customTriggerProps: {\n            displayValue: ReactNode;\n            isInvalid: boolean;\n            hint: string;\n          },\n          props:\n            | (AriaLabelingProps &\n                StylingProps &\n                DataTestId &\n                (Partial<ButtonAria<AnchorHTMLAttributes<HTMLButtonElement>>> &\n                  AriaButtonProps))\n            | null,\n        ) => ReactElement);\n  };\n\n/**\n * Typeguard function that will check if a ReactNode is a TimeframeSelector.CustomTrigger\n * @internal\n */\nexport function isTimeframeSelectorCustomTriggerElement(\n  child: ReactNode,\n): child is ReactElement<TimeframeSelectorCustomTriggerProps> {\n  return isElement(child) && child.type === CustomTrigger;\n}\n\n/**\n * A trigger component to customize a timeframe selector's trigger.\n * It applies all necessary props on the first and closest child,\n * which, therefore, should be an interactive element.\n * @public\n */\nexport const CustomTrigger = (props: TimeframeSelectorCustomTriggerProps) => {\n  const { children, ...remainingProps } = props;\n  const { triggerProps, displayValue, hint } = useTimeframeSelectorContext();\n  const {\n    state: { isValid },\n  } = useFormFieldMessagesContext();\n\n  const dtComponentName = triggerProps?.['data-dt-component'];\n\n  if (isValidElement<PropsWithChildren>(children)) {\n    return cloneElement(children, {\n      ...mergeProps(triggerProps, remainingProps, children.props, {\n        'data-dt-component': dtComponentName,\n      }),\n    });\n  }\n\n  if (typeof children === 'function') {\n    return children(\n      { displayValue, isInvalid: !isValid, hint },\n      mergeProps(triggerProps, remainingProps),\n    );\n  }\n\n  return null;\n};\n\nCustomTrigger['displayName'] = 'TimeframeSelector.CustomTrigger';\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EAKA;AAAA,OACK;AACP,SAAS,iBAAiB;AAS1B,SAAS,kBAAkB;AAC3B,SAAS,mCAAmC;AAC5C,SAAS,mCAAmC;AAgCrC,SAAS,wCACd,OAC4D;AAC5D,SAAO,UAAU,KAAK,KAAK,MAAM,SAAS;AAC5C;AAQO,MAAM,gBAAgB,CAAC,UAA+C;AAC3E,QAAM,EAAE,UAAU,GAAG,eAAe,IAAI;AACxC,QAAM,EAAE,cAAc,cAAc,KAAK,IAAI,4BAA4B;AACzE,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,EACnB,IAAI,4BAA4B;AAEhC,QAAM,kBAAkB,eAAe,mBAAmB;AAE1D,MAAI,eAAkC,QAAQ,GAAG;AAC/C,WAAO,aAAa,UAAU;AAAA,MAC5B,GAAG,WAAW,cAAc,gBAAgB,SAAS,OAAO;AAAA,QAC1D,qBAAqB;AAAA,MACvB,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAEA,MAAI,OAAO,aAAa,YAAY;AAClC,WAAO;AAAA,MACL,EAAE,cAAc,WAAW,CAAC,SAAS,KAAK;AAAA,MAC1C,WAAW,cAAc,cAAc;AAAA,IACzC;AAAA,EACF;AAEA,SAAO;AACT;AAEA,cAAc,aAAa,IAAI;",
+  "sourcesContent": ["import {\n  isValidElement,\n  type AnchorHTMLAttributes,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  cloneElement,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport type {\n  AriaButtonProps,\n  ButtonAria,\n} from '../../../../buttons/button/types/button-aria.js';\nimport { AriaLabelingProps } from '../../../../core/types/a11y-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\n\n/**\n * @public\n */\nexport type TimeframeSelectorCustomTriggerProps = AriaLabelingProps &\n  StylingProps &\n  DataTestId & {\n    /** Elements to be displayed in the CustomTrigger. */\n    children:\n      | ReactNode\n      | undefined\n      | ((\n          customTriggerProps: {\n            displayValue: ReactNode;\n            isInvalid: boolean;\n            hint: string;\n          },\n          props:\n            | (AriaLabelingProps &\n                StylingProps &\n                DataTestId &\n                (Partial<ButtonAria<AnchorHTMLAttributes<HTMLButtonElement>>> &\n                  AriaButtonProps))\n            | null,\n        ) => ReactElement);\n  };\n\n/**\n * Typeguard function that will check if a ReactNode is a TimeframeSelector.CustomTrigger\n * @internal\n */\nexport function isTimeframeSelectorCustomTriggerElement(\n  child: ReactNode,\n): child is ReactElement<TimeframeSelectorCustomTriggerProps> {\n  return isElement(child) && child.type === CustomTrigger;\n}\n\n/**\n * A trigger component to customize a timeframe selector's trigger.\n * It applies all necessary props on the first and closest child,\n * which, therefore, should be an interactive element.\n * @public\n */\nexport const CustomTrigger = (props: TimeframeSelectorCustomTriggerProps) => {\n  const { children, ...remainingProps } = props;\n  const { triggerProps, displayValue, hint, showError } =\n    useTimeframeSelectorContext();\n\n  const dtComponentName = triggerProps?.['data-dt-component'];\n\n  if (isValidElement<PropsWithChildren>(children)) {\n    return cloneElement(children, {\n      ...mergeProps(\n        triggerProps,\n        { color: showError ? 'critical' : undefined },\n        remainingProps,\n        children.props,\n        { 'data-dt-component': dtComponentName },\n      ),\n    });\n  }\n\n  if (typeof children === 'function') {\n    return children(\n      { displayValue, isInvalid: showError, hint },\n      mergeProps(triggerProps, remainingProps),\n    );\n  }\n\n  return null;\n};\n\nCustomTrigger['displayName'] = 'TimeframeSelector.CustomTrigger';\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EAKA;AAAA,OACK;AACP,SAAS,iBAAiB;AAS1B,SAAS,kBAAkB;AAC3B,SAAS,mCAAmC;AAgCrC,SAAS,wCACd,OAC4D;AAC5D,SAAO,UAAU,KAAK,KAAK,MAAM,SAAS;AAC5C;AAQO,MAAM,gBAAgB,CAAC,UAA+C;AAC3E,QAAM,EAAE,UAAU,GAAG,eAAe,IAAI;AACxC,QAAM,EAAE,cAAc,cAAc,MAAM,UAAU,IAClD,4BAA4B;AAE9B,QAAM,kBAAkB,eAAe,mBAAmB;AAE1D,MAAI,eAAkC,QAAQ,GAAG;AAC/C,WAAO,aAAa,UAAU;AAAA,MAC5B,GAAG;AAAA,QACD;AAAA,QACA,EAAE,OAAO,YAAY,aAAa,OAAU;AAAA,QAC5C;AAAA,QACA,SAAS;AAAA,QACT,EAAE,qBAAqB,gBAAgB;AAAA,MACzC;AAAA,IACF,CAAC;AAAA,EACH;AAEA,MAAI,OAAO,aAAa,YAAY;AAClC,WAAO;AAAA,MACL,EAAE,cAAc,WAAW,WAAW,KAAK;AAAA,MAC3C,WAAW,cAAc,cAAc;AAAA,IACzC;AAAA,EACF;AAEA,SAAO;AACT;AAEA,cAAc,aAAa,IAAI;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/trigger/Trigger.css

@@ -1,10 +1,10 @@
-._attccb0-3-2-1 {
+._attccb0-3-3-0 {
   cursor: not-allowed;
 }
-._attccb1-3-2-1 {
+._attccb1-3-3-0 {
   font-size: 0;
   transition-property: transform;
 }
-._attccb2-3-2-1 {
+._attccb2-3-3-0 {
   transform: rotate(180deg);
 }

package/esm/filters/timeframe-selector/components/trigger/Trigger.js

@@ -1,16 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import {
-  Children
+  Children,
+  useMemo
 } from "react";
-import { useMemo } from "react";
 import { isElement } from "react-is";
 import { ChevronDownSmallIcon } from "@dynatrace/strato-icons";
 import { isTimeframeSelectorDisplayValueElement } from "./DisplayValue.js";
 import * as styles from "./Trigger.sty.js";
 import { Button } from "../../../../buttons/button/Button.js";
 import { mergeProps as _mergeProps } from "../../../../core/utils/merge-props.js";
-import { useInternalTimeframeSelectorContext } from "../../hooks/useInternalTimeframeSelectorContext.js";
 import { useTimeframeSelectorContext } from "../../hooks/useTimeframeSelectorContext.js";
 function isTimeframeSelectorTriggerElement(child) {
   return isElement(child) && child.type === Trigger;
@@ -41,9 +40,10 @@ const Trigger = (props) => {
   const {
     triggerProps,
     displayValue: contextDisplayValue,
-    details
+    details,
+    readOnly,
+    showError
   } = useTimeframeSelectorContext();
-  const { readOnly, showError } = useInternalTimeframeSelectorContext();
   const displayValue = displayValueSlot ?? contextDisplayValue;
   const placeholderIfEmpty = placeholder ?? contextDisplayValue;
   return /* @__PURE__ */ jsxs(

package/esm/filters/timeframe-selector/components/trigger/Trigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/trigger/Trigger.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type PropsWithChildren,\n  type ReactNode,\n  type ReactElement,\n  Children,\n} from 'react';\nimport { useMemo } from 'react';\nimport { isElement } from 'react-is';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { isTimeframeSelectorDisplayValueElement } from './DisplayValue.js';\nimport * as styles from './Trigger.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { AriaLabelingProps } from '../../../../core/types/a11y-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { mergeProps as _mergeProps } from '../../../../core/utils/merge-props.js';\nimport { useInternalTimeframeSelectorContext } from '../../hooks/useInternalTimeframeSelectorContext.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\n\n/**\n * @public\n */\nexport type TimeframeSelectorTriggerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  AriaLabelingProps & {\n    /**\n     * The placeholder text displayed in the TimeframeSelector.Trigger.\n     */\n    placeholder?: ReactNode;\n  };\n\n/**\n * Typeguard function that will check if a ReactNode is a TimeframeSelector.Trigger\n * @internal\n */\nexport function isTimeframeSelectorTriggerElement(\n  child: ReactNode,\n): child is ReactElement<TimeframeSelectorTriggerProps> {\n  return isElement(child) && child.type === Trigger;\n}\n\nfunction getDisplayValueSlot(children: ReactNode) {\n  let displayValue: ReactNode[] | null = null;\n\n  Children.forEach(children, (child) => {\n    if (isTimeframeSelectorDisplayValueElement(child)) {\n      displayValue = displayValue || [];\n      displayValue.push(child);\n    }\n  });\n\n  return displayValue;\n}\n\n/**\n * A trigger component to customize a timeframe selector's trigger with custom styling, placeholder, aria labels, and data-testid.\n * If it doesn't have children, the default trigger is used. Otherwise, the `TimeframeSelector.DisplayValue` component can be used within it to define a custom display value within.\n * @public\n */\nexport const Trigger = (props: TimeframeSelectorTriggerProps) => {\n  const {\n    children,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  const displayValueSlot = useMemo(\n    () => getDisplayValueSlot(children),\n    [children],\n  );\n\n  const {\n    triggerProps,\n    displayValue: contextDisplayValue,\n    details,\n  } = useTimeframeSelectorContext();\n  const { readOnly, showError } = useInternalTimeframeSelectorContext();\n\n  const displayValue = displayValueSlot ?? contextDisplayValue;\n  const placeholderIfEmpty = placeholder ?? contextDisplayValue;\n\n  return (\n    <Button\n      {..._mergeProps(triggerProps, remainingProps)}\n      data-testid={dataTestId}\n      variant=\"emphasized\"\n      color={showError ? 'critical' : 'neutral'}\n      style={consumerStyle}\n      className={clsx(consumerClassName, readOnly && styles.readOnly)}\n    >\n      <Button.Suffix>\n        <ChevronDownSmallIcon\n          className={clsx(\n            styles.suffix,\n            triggerProps?.['aria-expanded'] && styles.suffixOpen,\n          )}\n        />\n      </Button.Suffix>\n      {details ? displayValue : placeholderIfEmpty}\n    </Button>\n  );\n};\n\nTrigger.displayName = 'TimeframeSelector.Trigger';\n"],
-  "mappings": "AAyFI,SASI,KATJ;AAzFJ,OAAO,UAAU;AACjB;AAAA,EAIE;AAAA,OACK;AACP,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAE1B,SAAS,4BAA4B;AAErC,SAAS,8CAA8C;AACvD,YAAY,YAAY;AACxB,SAAS,cAAc;AAIvB,SAAS,cAAc,mBAAmB;AAC1C,SAAS,2CAA2C;AACpD,SAAS,mCAAmC;AAmBrC,SAAS,kCACd,OACsD;AACtD,SAAO,UAAU,KAAK,KAAK,MAAM,SAAS;AAC5C;AAEA,SAAS,oBAAoB,UAAqB;AAChD,MAAI,eAAmC;AAEvC,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,uCAAuC,KAAK,GAAG;AACjD,qBAAe,gBAAgB,CAAC;AAChC,mBAAa,KAAK,KAAK;AAAA,IACzB;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOO,MAAM,UAAU,CAAC,UAAyC;AAC/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB;AAAA,IACvB,MAAM,oBAAoB,QAAQ;AAAA,IAClC,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd;AAAA,EACF,IAAI,4BAA4B;AAChC,QAAM,EAAE,UAAU,UAAU,IAAI,oCAAoC;AAEpE,QAAM,eAAe,oBAAoB;AACzC,QAAM,qBAAqB,eAAe;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,YAAY,cAAc,cAAc;AAAA,MAC5C,eAAa;AAAA,MACb,SAAQ;AAAA,MACR,OAAO,YAAY,aAAa;AAAA,MAChC,OAAO;AAAA,MACP,WAAW,KAAK,mBAAmB,YAAY,OAAO,QAAQ;AAAA,MAE9D;AAAA,4BAAC,OAAO,QAAP,EACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,eAAe,eAAe,KAAK,OAAO;AAAA,YAC5C;AAAA;AAAA,QACF,GACF;AAAA,QACC,UAAU,eAAe;AAAA;AAAA;AAAA,EAC5B;AAEJ;AAEA,QAAQ,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type PropsWithChildren,\n  type ReactNode,\n  type ReactElement,\n  Children,\n  useMemo,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { isTimeframeSelectorDisplayValueElement } from './DisplayValue.js';\nimport * as styles from './Trigger.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { AriaLabelingProps } from '../../../../core/types/a11y-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { mergeProps as _mergeProps } from '../../../../core/utils/merge-props.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\n\n/**\n * @public\n */\nexport type TimeframeSelectorTriggerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  AriaLabelingProps & {\n    /**\n     * The placeholder text displayed in the TimeframeSelector.Trigger.\n     */\n    placeholder?: ReactNode;\n  };\n\n/**\n * Typeguard function that will check if a ReactNode is a TimeframeSelector.Trigger\n * @internal\n */\nexport function isTimeframeSelectorTriggerElement(\n  child: ReactNode,\n): child is ReactElement<TimeframeSelectorTriggerProps> {\n  return isElement(child) && child.type === Trigger;\n}\n\nfunction getDisplayValueSlot(children: ReactNode) {\n  let displayValue: ReactNode[] | null = null;\n\n  Children.forEach(children, (child) => {\n    if (isTimeframeSelectorDisplayValueElement(child)) {\n      displayValue = displayValue || [];\n      displayValue.push(child);\n    }\n  });\n\n  return displayValue;\n}\n\n/**\n * A trigger component to customize a timeframe selector's trigger with custom styling, placeholder, aria labels, and data-testid.\n * If it doesn't have children, the default trigger is used. Otherwise, the `TimeframeSelector.DisplayValue` component can be used within it to define a custom display value within.\n * @public\n */\nexport const Trigger = (props: TimeframeSelectorTriggerProps) => {\n  const {\n    children,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  const displayValueSlot = useMemo(\n    () => getDisplayValueSlot(children),\n    [children],\n  );\n\n  const {\n    triggerProps,\n    displayValue: contextDisplayValue,\n    details,\n    readOnly,\n    showError,\n  } = useTimeframeSelectorContext();\n\n  const displayValue = displayValueSlot ?? contextDisplayValue;\n  const placeholderIfEmpty = placeholder ?? contextDisplayValue;\n\n  return (\n    <Button\n      {..._mergeProps(triggerProps, remainingProps)}\n      data-testid={dataTestId}\n      variant=\"emphasized\"\n      color={showError ? 'critical' : 'neutral'}\n      style={consumerStyle}\n      className={clsx(consumerClassName, readOnly && styles.readOnly)}\n    >\n      <Button.Suffix>\n        <ChevronDownSmallIcon\n          className={clsx(\n            styles.suffix,\n            triggerProps?.['aria-expanded'] && styles.suffixOpen,\n          )}\n        />\n      </Button.Suffix>\n      {details ? displayValue : placeholderIfEmpty}\n    </Button>\n  );\n};\n\nTrigger.displayName = 'TimeframeSelector.Trigger';\n"],
+  "mappings": "AAyFI,SASI,KATJ;AAzFJ,OAAO,UAAU;AACjB;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,4BAA4B;AAErC,SAAS,8CAA8C;AACvD,YAAY,YAAY;AACxB,SAAS,cAAc;AAIvB,SAAS,cAAc,mBAAmB;AAC1C,SAAS,mCAAmC;AAmBrC,SAAS,kCACd,OACsD;AACtD,SAAO,UAAU,KAAK,KAAK,MAAM,SAAS;AAC5C;AAEA,SAAS,oBAAoB,UAAqB;AAChD,MAAI,eAAmC;AAEvC,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,uCAAuC,KAAK,GAAG;AACjD,qBAAe,gBAAgB,CAAC;AAChC,mBAAa,KAAK,KAAK;AAAA,IACzB;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOO,MAAM,UAAU,CAAC,UAAyC;AAC/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB;AAAA,IACvB,MAAM,oBAAoB,QAAQ;AAAA,IAClC,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B;AAEhC,QAAM,eAAe,oBAAoB;AACzC,QAAM,qBAAqB,eAAe;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,YAAY,cAAc,cAAc;AAAA,MAC5C,eAAa;AAAA,MACb,SAAQ;AAAA,MACR,OAAO,YAAY,aAAa;AAAA,MAChC,OAAO;AAAA,MACP,WAAW,KAAK,mBAAmB,YAAY,OAAO,QAAQ;AAAA,MAE9D;AAAA,4BAAC,OAAO,QAAP,EACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,eAAe,eAAe,KAAK,OAAO;AAAA,YAC5C;AAAA;AAAA,QACF,GACF;AAAA,QACC,UAAU,eAAe;AAAA;AAAA;AAAA,EAC5B;AAEJ;AAEA,QAAQ,cAAc;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/trigger/Trigger.sty.js

@@ -1,7 +1,7 @@
 import "./Trigger.css";
-var readOnly = "_attccb0-3-2-1";
-var suffix = "_attccb1-3-2-1";
-var suffixOpen = "_attccb2-3-2-1";
+var readOnly = "_attccb0-3-3-0";
+var suffix = "_attccb1-3-3-0";
+var suffixOpen = "_attccb2-3-3-0";
 export {
   readOnly,
   suffix,

package/esm/filters/timeframe-selector/components/trigger/Trigger.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/trigger/Trigger.css.ts"],
-  "sourcesContent": ["import './Trigger.css';\nexport var readOnly = '_attccb0-3-2-1';\nexport var suffix = '_attccb1-3-2-1';\nexport var suffixOpen = '_attccb2-3-2-1';"],
+  "sourcesContent": ["import './Trigger.css';\nexport var readOnly = '_attccb0-3-3-0';\nexport var suffix = '_attccb1-3-3-0';\nexport var suffixOpen = '_attccb2-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,SAAS;AACb,IAAI,aAAa;",
   "names": []
 }

package/esm/filters/timeframe-selector/constants/timeframeSelectorMessages.js

@@ -1,4 +1,61 @@
 import { defineMessages } from "react-intl";
+const TIMEFRAMESELECTOR_ERROR_MESSAGES = defineMessages({
+  minBoundary: {
+    id: "KETnWaCwo9qLRQrI",
+    defaultMessage: "Only dates after {min} are available.",
+    description: "Given dates are not within the valid range."
+  },
+  maxBoundary: {
+    id: "ONYnUtFidz4+6NmE",
+    defaultMessage: "Only dates before {max} are available.",
+    description: "Given dates are not within the valid range."
+  },
+  minMaxBoundary: {
+    id: "Qm0/7EQKVXjS9tDM",
+    defaultMessage: "Only dates between {min} \u2192 {max} are available.",
+    description: "Given dates are not within the valid range."
+  },
+  invalidOrder: {
+    defaultMessage: "'from' date should be before 'to' date",
+    id: "DKFIWE64kHV1ohuk",
+    description: "Message to display if the from and to dates are in the wrong order."
+  },
+  missingFrom: {
+    defaultMessage: "Please enter a start time.",
+    id: "GUeetpTpusqFkMi+",
+    description: "From value is missing."
+  },
+  missingTo: {
+    defaultMessage: "Please enter an end time.",
+    id: "tfHTZkRc7sr/Ypcl",
+    description: "End value is missing."
+  },
+  missingFromTo: {
+    defaultMessage: "Please enter a start and end time.",
+    id: "4yANH5gdmW1efk0I",
+    description: "Start and end values are missing."
+  },
+  valueMissing: {
+    defaultMessage: "Empty timeframe.",
+    id: "QsKlSIxE+Yp58CUG",
+    description: "Timeframe selector required timeframe error hint."
+  },
+  invalidFrom: {
+    defaultMessage: "Invalid start time. Expected format: {expectedFormat}, -2h or -2d@d",
+    id: "supuOfI2cSrNKOZ/",
+    description: "Given from value is invalid"
+  },
+  invalidTo: {
+    defaultMessage: "Invalid end time. Expected format: {expectedFormat}, -2h or -2d@d",
+    id: "HL9dGWGnhYkm7OyC",
+    description: "Given to value is invalid"
+  },
+  invalidFromTo: {
+    defaultMessage: "Invalid start and end time. Expected format: {expectedFormat}, -2h or -2d@d",
+    id: "89sBAyzLbeW6GyPJ",
+    description: "Given from and to values are invalid"
+  }
+});
 const TIMEFRAME_SELECTOR_MESSAGES = defineMessages({
   startTime: {
     description: "Description for the start time of the preset item value, that is shown in the tooltip",
@@ -122,6 +179,7 @@ const TIMEFRAME_SELECTOR_MESSAGES = defineMessages({
   }
 });
 export {
+  TIMEFRAMESELECTOR_ERROR_MESSAGES,
   TIMEFRAME_SELECTOR_MESSAGES
 };
 //# sourceMappingURL=timeframeSelectorMessages.js.map

package/esm/filters/timeframe-selector/constants/timeframeSelectorMessages.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/timeframe-selector/constants/timeframeSelectorMessages.ts"],
-  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\n/** @internal */\nexport const TIMEFRAME_SELECTOR_MESSAGES = defineMessages({\n  startTime: {\n    description:\n      'Description for the start time of the preset item value, that is shown in the tooltip',\n    defaultMessage: 'Start',\n    id: 'QF4myF79Hrp3e/0Q',\n  },\n  endTime: {\n    description:\n      'Description for the end time of the preset item value, that is shown in the tooltip',\n    defaultMessage: 'End',\n    id: 'fHGjouAXIpSTl8T2',\n  },\n  duration: {\n    description:\n      'Description for the duration of the timeframe, that is shown in the tooltip',\n    defaultMessage: 'Duration',\n    id: 'ZvsC1dVcKeywqOWW',\n  },\n  prefix: {\n    description:\n      'Prefix for the moving a duration of the timeframe forward or backward, that is shown in the tooltip',\n    defaultMessage: 'Move ',\n    id: 'VoHb/9htaX3GgMyA',\n  },\n  suffix: {\n    description:\n      'Suffix for the moving a duration of the timeframe forward or backward, that is shown in the tooltip',\n    defaultMessage: ' {suffix}',\n    id: 'IU+dkogAuDAabi52',\n  },\n  'ms-duration': {\n    description: 'Timeframe duration formatter: timeframe-millisecond',\n    defaultMessage:\n      '{offset, plural, one {# millisecond} other {# milliseconds}} ',\n    id: 'L6ZeI3XBOuh0L/CT',\n  },\n  's-duration': {\n    description: 'Timeframe duration formatter: timeframe-second',\n    defaultMessage: '{offset, plural, one {# second} other {# seconds}} ',\n    id: 'mG+nMDkU8bB8zLlO',\n  },\n  'm-duration': {\n    description: 'Timeframe duration formatter: timeframe-minute',\n    defaultMessage: '{offset, plural, one {# minute} other {# minutes}} ',\n    id: 'JlWcGe/hRo/kyTD+',\n  },\n  'h-duration': {\n    description: 'Timeframe duration formatter: timeframe-hour',\n    defaultMessage: '{offset, plural, one {# hour} other {# hours}}',\n    id: 'ADLDZ8spJCrDx/6Q',\n  },\n  'd-duration': {\n    description: 'Timeframe duration formatter: timeframe-day',\n    defaultMessage: '{offset, plural, one {# day} other {# days}}',\n    id: 'gIQd1giAq7WNDZp6',\n  },\n  'w-duration': {\n    description: 'Timeframe duration formatter: timeframe-week',\n    defaultMessage: '{offset, plural, one {# week} other {# weeks}}',\n    id: 'TuHiu5OflYhkrvKy',\n  },\n  'M-duration': {\n    description: 'Timeframe duration formatter: timeframe-month',\n    defaultMessage: '{offset, plural, one {# month} other {# months}} ',\n    id: 'AYfNQEjfwenkbxsg',\n  },\n  'q-duration': {\n    description: 'Timeframe duration formatter: timeframe-quarter',\n    defaultMessage: '{offset, plural, one {# quarter} other {# quarters}}',\n    id: 'ItflQisz88wfEcF+',\n  },\n  'y-duration': {\n    description: 'Timeframe duration formatter: timeframe-year',\n    defaultMessage: '{offset, plural, one {# year} other {# years}}',\n    id: 'gzgHXY7+xENWvOfC',\n  },\n  absoluteDateDuration: {\n    description: 'Timeframe duration formatter: move-absolute-date',\n    defaultMessage:\n      '{years, select, 0 {} other {{years, plural, one {# year } other {# years }}}}' +\n      '{months, select, 0 {} other {{months, plural, one {# month } other {# months }}}}' +\n      '{days, select, 0 {} other {{days, plural, one {# day } other {# days }}}}' +\n      '{hours, select, 0 {} other {{hours, plural, one {# hour } other {# hours }}}}' +\n      '{minutes, select, 0 {} other {{minutes, plural, one {# minute } other {# minutes }}}}' +\n      '{seconds, select, 0 {} other {{seconds, plural, one {# second } other {# seconds }}}}' +\n      '{milliseconds, select, 0 {} other {{milliseconds, plural, one {# millisecond } other {# milliseconds }}}}',\n    id: 'sITxaoPwIvMbTOY3',\n  },\n  docsLinkText: {\n    defaultMessage: 'Learn more',\n    id: 'q9YfvvFrRo1n8wvN',\n    description:\n      'Display text for the link to the timeframe selector documentation.',\n  },\n  resetTimeframeButton: {\n    defaultMessage: 'Reset timeframe',\n    id: 'EG+qZn4zIajJ41CP',\n    description:\n      'Shown for the reset timeframe button of the timeframe selector.',\n  },\n  timeframePresets: {\n    defaultMessage: 'List of timeframe presets',\n    id: '1cycyeSJyv4MEQyz',\n    description: 'Aria label for the list of timeframe presets.',\n  },\n  recentTimeframesHeading: {\n    defaultMessage: 'Recently used',\n    id: '8kqNkvIZtJIon5xR',\n    description: 'Heading for the recently used timeframes.',\n  },\n  recentTimeframesList: {\n    defaultMessage: 'List of recently used timeframes',\n    id: 'BDzwWccOiezgFJp3',\n    description: 'Aria label for the list of recently used timeframes.',\n  },\n  disabledTooltip: {\n    defaultMessage: 'The timeframe exceeds the limits supported in this app.',\n    id: 'KzBG7IQ4sG79Dlpy',\n    description: 'Tooltip message for a disabled timeframe.',\n  },\n  overlayContainer: {\n    defaultMessage:\n      'Timeframe selector overlay for providing a custom timeframe or selecting one of the presets',\n    id: 'hnsZ5MLEj9V3vVxP',\n    description: 'Aria label for the overlay of the timeframe selector.',\n  },\n  applyButton: {\n    defaultMessage: 'Apply',\n    id: 'Np6+N27mrjvIJEls',\n    description: 'Shown for the apply button of the timeframe selector.',\n  },\n  timeframeLabel: {\n    defaultMessage: 'Timeframe',\n    id: 'EKDlkAM4+D7rcALf',\n    description: 'Timeframe label shown in the TimeframeSelector overlay.',\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAGxB,MAAM,8BAA8B,eAAe;AAAA,EACxD,WAAW;AAAA,IACT,aACE;AAAA,IACF,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN;AAAA,EACA,SAAS;AAAA,IACP,aACE;AAAA,IACF,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACR,aACE;AAAA,IACF,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACN,aACE;AAAA,IACF,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACN,aACE;AAAA,IACF,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN;AAAA,EACA,eAAe;AAAA,IACb,aAAa;AAAA,IACb,gBACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,cAAc;AAAA,IACZ,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN;AAAA,EACA,cAAc;AAAA,IACZ,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN;AAAA,EACA,cAAc;AAAA,IACZ,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN;AAAA,EACA,cAAc;AAAA,IACZ,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN;AAAA,EACA,cAAc;AAAA,IACZ,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN;AAAA,EACA,cAAc;AAAA,IACZ,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN;AAAA,EACA,cAAc;AAAA,IACZ,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN;AAAA,EACA,cAAc;AAAA,IACZ,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN;AAAA,EACA,sBAAsB;AAAA,IACpB,aAAa;AAAA,IACb,gBACE;AAAA,IAOF,IAAI;AAAA,EACN;AAAA,EACA,cAAc;AAAA,IACZ,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,sBAAsB;AAAA,IACpB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AAAA,EACA,yBAAyB;AAAA,IACvB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AAAA,EACA,sBAAsB;AAAA,IACpB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AAAA,EACA,iBAAiB;AAAA,IACf,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AAAA,EACA,kBAAkB;AAAA,IAChB,gBACE;AAAA,IACF,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AAAA,EACA,aAAa;AAAA,IACX,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AAAA,EACA,gBAAgB;AAAA,IACd,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AACF,CAAC;",
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\n/**\n * Error messages for the TimeframeSelector component.\n * @internal\n */\nexport const TIMEFRAMESELECTOR_ERROR_MESSAGES = defineMessages({\n  minBoundary: {\n    id: 'KETnWaCwo9qLRQrI',\n    defaultMessage: 'Only dates after {min} are available.',\n    description: 'Given dates are not within the valid range.',\n  },\n  maxBoundary: {\n    id: 'ONYnUtFidz4+6NmE',\n    defaultMessage: 'Only dates before {max} are available.',\n    description: 'Given dates are not within the valid range.',\n  },\n  minMaxBoundary: {\n    id: 'Qm0/7EQKVXjS9tDM',\n    defaultMessage: 'Only dates between {min} \u2192 {max} are available.',\n    description: 'Given dates are not within the valid range.',\n  },\n  invalidOrder: {\n    defaultMessage: \"'from' date should be before 'to' date\",\n    id: 'DKFIWE64kHV1ohuk',\n    description:\n      'Message to display if the from and to dates are in the wrong order.',\n  },\n  missingFrom: {\n    defaultMessage: 'Please enter a start time.',\n    id: 'GUeetpTpusqFkMi+',\n    description: 'From value is missing.',\n  },\n  missingTo: {\n    defaultMessage: 'Please enter an end time.',\n    id: 'tfHTZkRc7sr/Ypcl',\n    description: 'End value is missing.',\n  },\n  missingFromTo: {\n    defaultMessage: 'Please enter a start and end time.',\n    id: '4yANH5gdmW1efk0I',\n    description: 'Start and end values are missing.',\n  },\n  valueMissing: {\n    defaultMessage: 'Empty timeframe.',\n    id: 'QsKlSIxE+Yp58CUG',\n    description: 'Timeframe selector required timeframe error hint.',\n  },\n  invalidFrom: {\n    defaultMessage:\n      'Invalid start time. Expected format: {expectedFormat}, -2h or -2d@d',\n    id: 'supuOfI2cSrNKOZ/',\n    description: 'Given from value is invalid',\n  },\n  invalidTo: {\n    defaultMessage:\n      'Invalid end time. Expected format: {expectedFormat}, -2h or -2d@d',\n    id: 'HL9dGWGnhYkm7OyC',\n    description: 'Given to value is invalid',\n  },\n  invalidFromTo: {\n    defaultMessage:\n      'Invalid start and end time. Expected format: {expectedFormat}, -2h or -2d@d',\n    id: '89sBAyzLbeW6GyPJ',\n    description: 'Given from and to values are invalid',\n  },\n});\n\n/** @internal */\nexport const TIMEFRAME_SELECTOR_MESSAGES = defineMessages({\n  startTime: {\n    description:\n      'Description for the start time of the preset item value, that is shown in the tooltip',\n    defaultMessage: 'Start',\n    id: 'QF4myF79Hrp3e/0Q',\n  },\n  endTime: {\n    description:\n      'Description for the end time of the preset item value, that is shown in the tooltip',\n    defaultMessage: 'End',\n    id: 'fHGjouAXIpSTl8T2',\n  },\n  duration: {\n    description:\n      'Description for the duration of the timeframe, that is shown in the tooltip',\n    defaultMessage: 'Duration',\n    id: 'ZvsC1dVcKeywqOWW',\n  },\n  prefix: {\n    description:\n      'Prefix for the moving a duration of the timeframe forward or backward, that is shown in the tooltip',\n    defaultMessage: 'Move ',\n    id: 'VoHb/9htaX3GgMyA',\n  },\n  suffix: {\n    description:\n      'Suffix for the moving a duration of the timeframe forward or backward, that is shown in the tooltip',\n    defaultMessage: ' {suffix}',\n    id: 'IU+dkogAuDAabi52',\n  },\n  'ms-duration': {\n    description: 'Timeframe duration formatter: timeframe-millisecond',\n    defaultMessage:\n      '{offset, plural, one {# millisecond} other {# milliseconds}} ',\n    id: 'L6ZeI3XBOuh0L/CT',\n  },\n  's-duration': {\n    description: 'Timeframe duration formatter: timeframe-second',\n    defaultMessage: '{offset, plural, one {# second} other {# seconds}} ',\n    id: 'mG+nMDkU8bB8zLlO',\n  },\n  'm-duration': {\n    description: 'Timeframe duration formatter: timeframe-minute',\n    defaultMessage: '{offset, plural, one {# minute} other {# minutes}} ',\n    id: 'JlWcGe/hRo/kyTD+',\n  },\n  'h-duration': {\n    description: 'Timeframe duration formatter: timeframe-hour',\n    defaultMessage: '{offset, plural, one {# hour} other {# hours}}',\n    id: 'ADLDZ8spJCrDx/6Q',\n  },\n  'd-duration': {\n    description: 'Timeframe duration formatter: timeframe-day',\n    defaultMessage: '{offset, plural, one {# day} other {# days}}',\n    id: 'gIQd1giAq7WNDZp6',\n  },\n  'w-duration': {\n    description: 'Timeframe duration formatter: timeframe-week',\n    defaultMessage: '{offset, plural, one {# week} other {# weeks}}',\n    id: 'TuHiu5OflYhkrvKy',\n  },\n  'M-duration': {\n    description: 'Timeframe duration formatter: timeframe-month',\n    defaultMessage: '{offset, plural, one {# month} other {# months}} ',\n    id: 'AYfNQEjfwenkbxsg',\n  },\n  'q-duration': {\n    description: 'Timeframe duration formatter: timeframe-quarter',\n    defaultMessage: '{offset, plural, one {# quarter} other {# quarters}}',\n    id: 'ItflQisz88wfEcF+',\n  },\n  'y-duration': {\n    description: 'Timeframe duration formatter: timeframe-year',\n    defaultMessage: '{offset, plural, one {# year} other {# years}}',\n    id: 'gzgHXY7+xENWvOfC',\n  },\n  absoluteDateDuration: {\n    description: 'Timeframe duration formatter: move-absolute-date',\n    defaultMessage:\n      '{years, select, 0 {} other {{years, plural, one {# year } other {# years }}}}' +\n      '{months, select, 0 {} other {{months, plural, one {# month } other {# months }}}}' +\n      '{days, select, 0 {} other {{days, plural, one {# day } other {# days }}}}' +\n      '{hours, select, 0 {} other {{hours, plural, one {# hour } other {# hours }}}}' +\n      '{minutes, select, 0 {} other {{minutes, plural, one {# minute } other {# minutes }}}}' +\n      '{seconds, select, 0 {} other {{seconds, plural, one {# second } other {# seconds }}}}' +\n      '{milliseconds, select, 0 {} other {{milliseconds, plural, one {# millisecond } other {# milliseconds }}}}',\n    id: 'sITxaoPwIvMbTOY3',\n  },\n  docsLinkText: {\n    defaultMessage: 'Learn more',\n    id: 'q9YfvvFrRo1n8wvN',\n    description:\n      'Display text for the link to the timeframe selector documentation.',\n  },\n  resetTimeframeButton: {\n    defaultMessage: 'Reset timeframe',\n    id: 'EG+qZn4zIajJ41CP',\n    description:\n      'Shown for the reset timeframe button of the timeframe selector.',\n  },\n  timeframePresets: {\n    defaultMessage: 'List of timeframe presets',\n    id: '1cycyeSJyv4MEQyz',\n    description: 'Aria label for the list of timeframe presets.',\n  },\n  recentTimeframesHeading: {\n    defaultMessage: 'Recently used',\n    id: '8kqNkvIZtJIon5xR',\n    description: 'Heading for the recently used timeframes.',\n  },\n  recentTimeframesList: {\n    defaultMessage: 'List of recently used timeframes',\n    id: 'BDzwWccOiezgFJp3',\n    description: 'Aria label for the list of recently used timeframes.',\n  },\n  disabledTooltip: {\n    defaultMessage: 'The timeframe exceeds the limits supported in this app.',\n    id: 'KzBG7IQ4sG79Dlpy',\n    description: 'Tooltip message for a disabled timeframe.',\n  },\n  overlayContainer: {\n    defaultMessage:\n      'Timeframe selector overlay for providing a custom timeframe or selecting one of the presets',\n    id: 'hnsZ5MLEj9V3vVxP',\n    description: 'Aria label for the overlay of the timeframe selector.',\n  },\n  applyButton: {\n    defaultMessage: 'Apply',\n    id: 'Np6+N27mrjvIJEls',\n    description: 'Shown for the apply button of the timeframe selector.',\n  },\n  timeframeLabel: {\n    defaultMessage: 'Timeframe',\n    id: 'EKDlkAM4+D7rcALf',\n    description: 'Timeframe label shown in the TimeframeSelector overlay.',\n  },\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/filters/timeframe-selector/contexts/TimeframeSelectorContext.js

@@ -5,9 +5,8 @@ const TimeframeSelectorContext = createContext({
   details: null,
   displayValue: null,
   triggerProps: null,
-  onChange: () => null,
   hint: "",
-  precision: "minutes"
+  showError: false
 });
 export {
   TimeframeSelectorContext

package/esm/filters/timeframe-selector/contexts/TimeframeSelectorContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/timeframe-selector/contexts/TimeframeSelectorContext.tsx"],
-  "sourcesContent": ["import {\n  AnchorHTMLAttributes,\n  createContext,\n  type ReactNode,\n  type Context,\n} from 'react';\nimport type { RequireAtLeastOne } from 'type-fest';\n\nimport type { AriaButtonProps, ButtonAria } from '../../../buttons/button/types/button-aria.js';\nimport type { Timeframe } from '../../../core/types/time.js';\n\nexport interface TimeframeSelectorContextProps {\n  /** Current value of the timeframe selector */\n  details: RequireAtLeastOne<Timeframe> | null;\n  /** Element displayed in the input field of the timeframe selector */\n  displayValue: ReactNode;\n  /** Necessary props for the trigger. */\n  triggerProps:\n    | (Partial<ButtonAria<AnchorHTMLAttributes<HTMLButtonElement>>> &\n        AriaButtonProps)\n    | null;\n  /** Callback triggered whenever the value of the timeframe selector changes */\n  onChange: (value: Timeframe | null) => void;\n  /** Hint representation for why it is invalid. */\n  hint: string;\n  /** The precision of the time shown in the display value. */\n  precision?: 'minutes' | 'seconds' | 'milliseconds';\n}\n\n/** Timeframe selector context, used to access the (input) value and onChange callback in other components. */\nexport const TimeframeSelectorContext: Context<TimeframeSelectorContextProps> =\n  createContext<TimeframeSelectorContextProps>({\n    details: null,\n    displayValue: null,\n    triggerProps: null,\n    onChange: () => null,\n    hint: '',\n    precision: 'minutes',\n  });\n"],
-  "mappings": "AAAA;AAAA,EAEE;AAAA,OAGK;AAyBA,MAAM,2BACX,cAA6C;AAAA,EAC3C,SAAS;AAAA,EACT,cAAc;AAAA,EACd,cAAc;AAAA,EACd,UAAU,MAAM;AAAA,EAChB,MAAM;AAAA,EACN,WAAW;AACb,CAAC;",
+  "sourcesContent": ["import {\n  AnchorHTMLAttributes,\n  createContext,\n  type ReactNode,\n  type Context,\n} from 'react';\nimport type { RequireAtLeastOne } from 'type-fest';\n\nimport type {\n  AriaButtonProps,\n  ButtonAria,\n} from '../../../buttons/button/types/button-aria.js';\nimport type { Timeframe } from '../../../core/types/time.js';\n\n/** @internal */\nexport interface TimeframeSelectorContextProps {\n  /** Current value of the timeframe selector */\n  details: RequireAtLeastOne<Timeframe> | null;\n  /** Element displayed in the input field of the timeframe selector */\n  displayValue: ReactNode;\n  /** Necessary props for the trigger. */\n  triggerProps:\n    | (Partial<ButtonAria<AnchorHTMLAttributes<HTMLButtonElement>>> &\n        AriaButtonProps)\n    | null;\n  /** Hint representation for why it is invalid. */\n  hint: string;\n  readOnly?: boolean;\n  /** Whether the trigger should display its error state (combines controlState and FormFieldMessages). */\n  showError: boolean;\n}\n\n/**\n * Timeframe selector context, used to access the (input) value and onChange callback in other components.\n * @internal\n */\nexport const TimeframeSelectorContext: Context<TimeframeSelectorContextProps> =\n  createContext<TimeframeSelectorContextProps>({\n    details: null,\n    displayValue: null,\n    triggerProps: null,\n    hint: '',\n    showError: false,\n  });\n"],
+  "mappings": "AAAA;AAAA,EAEE;AAAA,OAGK;AA+BA,MAAM,2BACX,cAA6C;AAAA,EAC3C,SAAS;AAAA,EACT,cAAc;AAAA,EACd,cAAc;AAAA,EACd,MAAM;AAAA,EACN,WAAW;AACb,CAAC;",
   "names": []
 }