@dynatrace/strato-components 3.2.1 → 3.3.1

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.js

@@ -9,6 +9,7 @@ import { OverlayContainer } from "../../../../core/components/OverlayContainer.j
 import { useOverlayStacking } from "../../../../core/hooks/useOverlayStacking.js";
 import { useRovingFocus } from "../../../../core/hooks/useRovingFocus.js";
 import { OverlayStackingProvider } from "../../../../core/providers/OverlayStackingProvider.js";
+import { useTimeframeSelectorStore } from "../../../../core/time/timeframeStore/useTimeframeStore.js";
 import { useDateTimeFormat } from "../../../../forms/date-time-picker/hooks/useDateTimeFormat.js";
 import { Flex } from "../../../../layouts/flex/Flex.js";
 import { DismissButton } from "../../../../overlays/hooks/useOverlay.js";
@@ -29,11 +30,10 @@ function getMaxWidth(toParts) {
 const TimeframeSelectorOverlay = forwardRef((props, forwardedRef) => {
   const {
     overlayProps,
+    /* eslint-disable @typescript-eslint/no-deprecated */
     clearable,
-    precision,
     children,
     overlayClose,
-    onChange,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow
   } = props;
@@ -44,6 +44,7 @@ const TimeframeSelectorOverlay = forwardRef((props, forwardedRef) => {
     ...remainingOverlayProps
   } = overlayProps;
   const overlayContainerProps = useOverlayStacking(void 0, "overlay");
+  const precision = useTimeframeSelectorStore((state) => state.precision);
   const { toParts } = useDateTimeFormat("datetime", precision);
   const { containerRef } = useRovingFocus({
     initialIndex: 0,
@@ -91,13 +92,7 @@ const TimeframeSelectorOverlay = forwardRef((props, forwardedRef) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx(
-                TimeframeSelectorOverlayFooter,
-                {
-                  clearable,
-                  onChange
-                }
-              )
+              /* @__PURE__ */ jsx(TimeframeSelectorOverlayFooter, { clearable })
             ]
           }
         ),

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './TimeframeSelectorOverlay.sty.js';\nimport { TimeframeSelectorOverlayFooter } from './TimeframeSelectorOverlayFooter.js';\nimport { FocusScope } from '../../../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../../../core/components/OverlayContainer.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { useRovingFocus } from '../../../../core/hooks/useRovingFocus.js';\nimport { OverlayStackingProvider } from '../../../../core/providers/OverlayStackingProvider.js';\nimport type { MaskingProps } from '../../../../core/types/masking-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { useDateTimeFormat } from '../../../../forms/date-time-picker/hooks/useDateTimeFormat.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport type { OverlayTriggerState } from '../../../../overlays/hooks/useOverlay.js';\nimport { DismissButton } from '../../../../overlays/hooks/useOverlay.js';\nimport type { OverlayProps } from '../../../../overlays/hooks/useOverlayWithTrigger.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from '../../TimeframeSelector.types.js';\nimport { CustomTimeframeSelector } from '../custom-timeframe-selector/CustomTimeframeSelector.js';\nimport { Presets } from '../presets/Presets.js';\nimport { RecentTimeframes } from '../presets/RecentTimeframes.js';\n\n//#region Typings\ninterface TimeframeSelectorOverlayProps\n  extends WithChildren,\n    MaskingProps,\n    Pick<TimeframeSelectorProps, 'onChange' | 'clearable' | 'precision'> {\n  /** The props of the overlay. */\n  overlayProps: OverlayProps['overlayProps'];\n  /** The state of the overlay. */\n  overlayClose: OverlayTriggerState['close'];\n}\n//#endregion\n\nfunction getMaxWidth(toParts: (date: Date) => Intl.DateTimeFormatPart[]) {\n  const placeholderFromOrToParts = toParts(new TZDateMini()).map(\n    (part: Intl.DateTimeFormatPart) => part.value,\n  );\n  const placeholderFromOrTo = placeholderFromOrToParts.join('');\n  const placeholdersNumberOfChars = 2 * placeholderFromOrTo.length;\n  const surroundingSpace = 22; // this is an approximation in ch units of the space around the placeholders (including the inline padding inside each placeholder part)\n\n  return `${\n    placeholdersNumberOfChars * 1.05 + // try to compensate for the ch unit being calculated for \"0\" instead of a placeholder char, which needs slightly more width\n    surroundingSpace\n  }ch`;\n}\n\n/**\n * Relative Timeframe Selector Overlay component\n */\nexport const TimeframeSelectorOverlay = forwardRef<\n  HTMLDivElement,\n  TimeframeSelectorOverlayProps\n>((props, forwardedRef) => {\n  const {\n    overlayProps,\n    clearable,\n    precision,\n    children,\n    overlayClose,\n    onChange,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n  const intl = useIntl();\n  const {\n    trapFocus,\n    style: overlayPropsStyle,\n    ...remainingOverlayProps\n  } = overlayProps;\n  const overlayContainerProps = useOverlayStacking(undefined, 'overlay');\n\n  const { toParts } = useDateTimeFormat('datetime', precision);\n\n  const { containerRef } = useRovingFocus<HTMLDivElement>({\n    initialIndex: 0,\n    direction: 'vertical',\n    focusableChildrenSelector: \"[role='option'][aria-disabled='false']\",\n  });\n\n  return (\n    <OverlayContainer\n      {...overlayContainerProps}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n    >\n      <OverlayStackingProvider>\n        <FocusScope autoFocus>\n          <Flex\n            ref={forwardedRef}\n            gap={4}\n            flexDirection=\"column\"\n            padding={4}\n            className={styles.wrapper}\n            style={{\n              ...overlayPropsStyle,\n              width: getMaxWidth(toParts),\n              maxHeight: `min(${overlayPropsStyle?.maxHeight}, 600px)`,\n            }}\n            aria-label={intl.formatMessage(\n              TIMEFRAME_SELECTOR_MESSAGES.overlayContainer,\n            )}\n            {...remainingOverlayProps}\n          >\n            <CustomTimeframeSelector />\n            <Flex\n              ref={containerRef}\n              gap={4}\n              paddingLeft={0}\n              paddingRight={0}\n              flexDirection=\"column\"\n              className={styles.scrollContainer}\n            >\n              {children ?? <Presets />}\n              <RecentTimeframes />\n            </Flex>\n            <TimeframeSelectorOverlayFooter\n              clearable={clearable}\n              onChange={onChange}\n            />\n          </Flex>\n          <DismissButton onDismiss={overlayClose} />\n        </FocusScope>\n      </OverlayStackingProvider>\n    </OverlayContainer>\n  );\n});\n\n(\n  TimeframeSelectorOverlay as typeof TimeframeSelectorOverlay & {\n    displayName: string;\n  }\n).displayName = 'TimeframeSelectorOverlay';\n"],
-  "mappings": "AA2GY,cACA,YADA;AA3GZ,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,sCAAsC;AAC/C,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AAGxC,SAAS,yBAAyB;AAClC,SAAS,YAAY;AAErB,SAAS,qBAAqB;AAE9B,SAAS,mCAAmC;AAE5C,SAAS,+BAA+B;AACxC,SAAS,eAAe;AACxB,SAAS,wBAAwB;AAcjC,SAAS,YAAY,SAAoD;AACvE,QAAM,2BAA2B,QAAQ,IAAI,WAAW,CAAC,EAAE;AAAA,IACzD,CAAC,SAAkC,KAAK;AAAA,EAC1C;AACA,QAAM,sBAAsB,yBAAyB,KAAK,EAAE;AAC5D,QAAM,4BAA4B,IAAI,oBAAoB;AAC1D,QAAM,mBAAmB;AAEzB,SAAO,GACL,4BAA4B;AAAA,EAC5B,gBACF;AACF;AAKO,MAAM,2BAA2B,WAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,EACtB,IAAI;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,wBAAwB,mBAAmB,QAAW,SAAS;AAErE,QAAM,EAAE,QAAQ,IAAI,kBAAkB,YAAY,SAAS;AAE3D,QAAM,EAAE,aAAa,IAAI,eAA+B;AAAA,IACtD,cAAc;AAAA,IACd,WAAW;AAAA,IACX,2BAA2B;AAAA,EAC7B,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAElB,8BAAC,2BACC,+BAAC,cAAW,WAAS,MACnB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK;AAAA,YACL,eAAc;AAAA,YACd,SAAS;AAAA,YACT,WAAW,OAAO;AAAA,YAClB,OAAO;AAAA,cACL,GAAG;AAAA,cACH,OAAO,YAAY,OAAO;AAAA,cAC1B,WAAW,OAAO,mBAAmB,SAAS;AAAA,YAChD;AAAA,YACA,cAAY,KAAK;AAAA,cACf,4BAA4B;AAAA,YAC9B;AAAA,YACC,GAAG;AAAA,YAEJ;AAAA,kCAAC,2BAAwB;AAAA,cACzB;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,KAAK;AAAA,kBACL,aAAa;AAAA,kBACb,cAAc;AAAA,kBACd,eAAc;AAAA,kBACd,WAAW,OAAO;AAAA,kBAEjB;AAAA,gCAAY,oBAAC,WAAQ;AAAA,oBACtB,oBAAC,oBAAiB;AAAA;AAAA;AAAA,cACpB;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA;AAAA;AAAA,cACF;AAAA;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,iBAAc,WAAW,cAAc;AAAA,SAC1C,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAGC,yBAGA,cAAc;",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './TimeframeSelectorOverlay.sty.js';\nimport { TimeframeSelectorOverlayFooter } from './TimeframeSelectorOverlayFooter.js';\nimport { FocusScope } from '../../../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../../../core/components/OverlayContainer.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { useRovingFocus } from '../../../../core/hooks/useRovingFocus.js';\nimport { OverlayStackingProvider } from '../../../../core/providers/OverlayStackingProvider.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { MaskingProps } from '../../../../core/types/masking-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { useDateTimeFormat } from '../../../../forms/date-time-picker/hooks/useDateTimeFormat.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport type { OverlayTriggerState } from '../../../../overlays/hooks/useOverlay.js';\nimport { DismissButton } from '../../../../overlays/hooks/useOverlay.js';\nimport type { OverlayProps } from '../../../../overlays/hooks/useOverlayWithTrigger.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from '../../TimeframeSelector.types.js';\nimport { CustomTimeframeSelector } from '../custom-timeframe-selector/CustomTimeframeSelector.js';\nimport { Presets } from '../presets/Presets.js';\nimport { RecentTimeframes } from '../presets/RecentTimeframes.js';\n\n//#region Typings\ninterface TimeframeSelectorOverlayProps\n  extends WithChildren,\n    MaskingProps,\n    Pick<TimeframeSelectorProps, 'clearable'> {\n  /** The props of the overlay. */\n  overlayProps: OverlayProps['overlayProps'];\n  /** The state of the overlay. */\n  overlayClose: OverlayTriggerState['close'];\n}\n//#endregion\n\nfunction getMaxWidth(toParts: (date: Date) => Intl.DateTimeFormatPart[]) {\n  const placeholderFromOrToParts = toParts(new TZDateMini()).map(\n    (part: Intl.DateTimeFormatPart) => part.value,\n  );\n  const placeholderFromOrTo = placeholderFromOrToParts.join('');\n  const placeholdersNumberOfChars = 2 * placeholderFromOrTo.length;\n  const surroundingSpace = 22; // this is an approximation in ch units of the space around the placeholders (including the inline padding inside each placeholder part)\n\n  return `${\n    placeholdersNumberOfChars * 1.05 + // try to compensate for the ch unit being calculated for \"0\" instead of a placeholder char, which needs slightly more width\n    surroundingSpace\n  }ch`;\n}\n\n/**\n * Relative Timeframe Selector Overlay component\n */\nexport const TimeframeSelectorOverlay = forwardRef<\n  HTMLDivElement,\n  TimeframeSelectorOverlayProps\n>((props, forwardedRef) => {\n  const {\n    overlayProps,\n    /* eslint-disable @typescript-eslint/no-deprecated */\n    clearable,\n    children,\n    overlayClose,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n  const intl = useIntl();\n  const {\n    trapFocus,\n    style: overlayPropsStyle,\n    ...remainingOverlayProps\n  } = overlayProps;\n  const overlayContainerProps = useOverlayStacking(undefined, 'overlay');\n\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n  const { toParts } = useDateTimeFormat('datetime', precision);\n\n  const { containerRef } = useRovingFocus<HTMLDivElement>({\n    initialIndex: 0,\n    direction: 'vertical',\n    focusableChildrenSelector: \"[role='option'][aria-disabled='false']\",\n  });\n\n  return (\n    <OverlayContainer\n      {...overlayContainerProps}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n    >\n      <OverlayStackingProvider>\n        <FocusScope autoFocus>\n          <Flex\n            ref={forwardedRef}\n            gap={4}\n            flexDirection=\"column\"\n            padding={4}\n            className={styles.wrapper}\n            style={{\n              ...overlayPropsStyle,\n              width: getMaxWidth(toParts),\n              maxHeight: `min(${overlayPropsStyle?.maxHeight}, 600px)`,\n            }}\n            aria-label={intl.formatMessage(\n              TIMEFRAME_SELECTOR_MESSAGES.overlayContainer,\n            )}\n            {...remainingOverlayProps}\n          >\n            <CustomTimeframeSelector />\n            <Flex\n              ref={containerRef}\n              gap={4}\n              paddingLeft={0}\n              paddingRight={0}\n              flexDirection=\"column\"\n              className={styles.scrollContainer}\n            >\n              {children ?? <Presets />}\n              <RecentTimeframes />\n            </Flex>\n            {/* eslint-disable @typescript-eslint/no-deprecated */}\n            <TimeframeSelectorOverlayFooter clearable={clearable} />\n          </Flex>\n          <DismissButton onDismiss={overlayClose} />\n        </FocusScope>\n      </OverlayStackingProvider>\n    </OverlayContainer>\n  );\n});\n\n(\n  TimeframeSelectorOverlay as typeof TimeframeSelectorOverlay & {\n    displayName: string;\n  }\n).displayName = 'TimeframeSelectorOverlay';\n"],
+  "mappings": "AA4GY,cACA,YADA;AA5GZ,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,sCAAsC;AAC/C,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAG1C,SAAS,yBAAyB;AAClC,SAAS,YAAY;AAErB,SAAS,qBAAqB;AAE9B,SAAS,mCAAmC;AAE5C,SAAS,+BAA+B;AACxC,SAAS,eAAe;AACxB,SAAS,wBAAwB;AAcjC,SAAS,YAAY,SAAoD;AACvE,QAAM,2BAA2B,QAAQ,IAAI,WAAW,CAAC,EAAE;AAAA,IACzD,CAAC,SAAkC,KAAK;AAAA,EAC1C;AACA,QAAM,sBAAsB,yBAAyB,KAAK,EAAE;AAC5D,QAAM,4BAA4B,IAAI,oBAAoB;AAC1D,QAAM,mBAAmB;AAEzB,SAAO,GACL,4BAA4B;AAAA,EAC5B,gBACF;AACF;AAKO,MAAM,2BAA2B,WAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,EACtB,IAAI;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,wBAAwB,mBAAmB,QAAW,SAAS;AAErE,QAAM,YAAY,0BAA0B,CAAC,UAAU,MAAM,SAAS;AACtE,QAAM,EAAE,QAAQ,IAAI,kBAAkB,YAAY,SAAS;AAE3D,QAAM,EAAE,aAAa,IAAI,eAA+B;AAAA,IACtD,cAAc;AAAA,IACd,WAAW;AAAA,IACX,2BAA2B;AAAA,EAC7B,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAElB,8BAAC,2BACC,+BAAC,cAAW,WAAS,MACnB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK;AAAA,YACL,eAAc;AAAA,YACd,SAAS;AAAA,YACT,WAAW,OAAO;AAAA,YAClB,OAAO;AAAA,cACL,GAAG;AAAA,cACH,OAAO,YAAY,OAAO;AAAA,cAC1B,WAAW,OAAO,mBAAmB,SAAS;AAAA,YAChD;AAAA,YACA,cAAY,KAAK;AAAA,cACf,4BAA4B;AAAA,YAC9B;AAAA,YACC,GAAG;AAAA,YAEJ;AAAA,kCAAC,2BAAwB;AAAA,cACzB;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,KAAK;AAAA,kBACL,aAAa;AAAA,kBACb,cAAc;AAAA,kBACd,eAAc;AAAA,kBACd,WAAW,OAAO;AAAA,kBAEjB;AAAA,gCAAY,oBAAC,WAAQ;AAAA,oBACtB,oBAAC,oBAAiB;AAAA;AAAA;AAAA,cACpB;AAAA,cAEA,oBAAC,kCAA+B,WAAsB;AAAA;AAAA;AAAA,QACxD;AAAA,QACA,oBAAC,iBAAc,WAAW,cAAc;AAAA,SAC1C,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAGC,yBAGA,cAAc;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.sty.js

@@ -1,8 +1,8 @@
 import "./TimeframeSelectorOverlay.css";
-var footer = "_14xc6b2-3-2-1";
-var hint = "_14xc6b3-3-2-1";
-var scrollContainer = "_14xc6b1-3-2-1";
-var wrapper = "_14xc6b0-3-2-1";
+var footer = "_14xc6b2-3-3-1";
+var hint = "_14xc6b3-3-3-1";
+var scrollContainer = "_14xc6b1-3-3-1";
+var wrapper = "_14xc6b0-3-3-1";
 export {
   footer,
   hint,

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.css.ts"],
-  "sourcesContent": ["import './TimeframeSelectorOverlay.css';\nexport var footer = '_14xc6b2-3-2-1';\nexport var hint = '_14xc6b3-3-2-1';\nexport var scrollContainer = '_14xc6b1-3-2-1';\nexport var wrapper = '_14xc6b0-3-2-1';"],
+  "sourcesContent": ["import './TimeframeSelectorOverlay.css';\nexport var footer = '_14xc6b2-3-3-1';\nexport var hint = '_14xc6b3-3-3-1';\nexport var scrollContainer = '_14xc6b1-3-3-1';\nexport var wrapper = '_14xc6b0-3-3-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,kBAAkB;AACtB,IAAI,UAAU;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlayFooter.js

@@ -10,6 +10,7 @@ import {
 } from "@dynatrace-sdk/user-preferences";
 import * as styles from "./TimeframeSelectorOverlay.sty.js";
 import { Button } from "../../../../buttons/button/Button.js";
+import { useTimeframeSelectorStore } from "../../../../core/time/timeframeStore/useTimeframeStore.js";
 import { Divider } from "../../../../layouts/divider/Divider.js";
 import { Flex } from "../../../../layouts/flex/Flex.js";
 import { globalSprinkles } from "../../../../styles/safe-sprinkles.js";
@@ -17,8 +18,11 @@ import { ExternalLink } from "../../../../typography/external-link/ExternalLink.
 import { Text } from "../../../../typography/text/Text.js";
 import { TIMEFRAME_SELECTOR_MESSAGES } from "../../constants/timeframeSelectorMessages.js";
 const TimeframeSelectorOverlayFooter = (props) => {
-  const { clearable, onChange } = props;
+  const { clearable } = props;
   const intl = useIntl();
+  const setValue = useTimeframeSelectorStore(
+    (state) => state.setTimeframeSelectorTimeframe
+  );
   const timeZoneWithOffset = useMemo(() => {
     const timeZone = getTimezone();
     const parts = new Intl.DateTimeFormat(getRegionalFormat(), {
@@ -38,7 +42,7 @@ const TimeframeSelectorOverlayFooter = (props) => {
     return `${timeZoneShortName}${timezoneDetails}`;
   }, []);
   function handleClearSelection() {
-    onChange?.(null);
+    setValue(null);
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Divider, {}),

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlayFooter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlayFooter.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport clsx from 'clsx';\nimport { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport {\n  getRegionalFormat,\n  getTimezone,\n} from '@dynatrace-sdk/user-preferences';\n\nimport * as styles from './TimeframeSelectorOverlay.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { Divider } from '../../../../layouts/divider/Divider.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { globalSprinkles } from '../../../../styles/safe-sprinkles.js';\nimport { ExternalLink } from '../../../../typography/external-link/ExternalLink.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from '../../TimeframeSelector.types.js';\n\nexport const TimeframeSelectorOverlayFooter = (\n  props: Pick<TimeframeSelectorProps, 'onChange' | 'clearable'>,\n) => {\n  const { clearable, onChange } = props;\n  const intl = useIntl();\n\n  const timeZoneWithOffset = useMemo(() => {\n    const timeZone = getTimezone();\n\n    const parts = new Intl.DateTimeFormat(getRegionalFormat(), {\n      timeZone,\n      timeZoneName: 'shortOffset',\n    }).formatToParts(TZDateMini.tz(timeZone));\n    const partsShortName = new Intl.DateTimeFormat(getRegionalFormat(), {\n      timeZone,\n      timeZoneName: 'short',\n    }).formatToParts(TZDateMini.tz(timeZone));\n    const timeZonePart = parts\n      ?.find((part) => part.type === 'timeZoneName')\n      ?.value.replace('GMT', 'UTC');\n    const timeZoneInfo = timeZonePart === 'UTC' ? 'UTC+0' : timeZonePart;\n    const timezoneDetails = timeZoneInfo ? ` (${timeZoneInfo})` : '';\n    const timeZoneShortName = partsShortName?.find(\n      (part) => part.type === 'timeZoneName',\n    )?.value;\n\n    return `${timeZoneShortName}${timezoneDetails}`;\n  }, []);\n\n  /** Handles the clear selection. Uses the pointerDown event to circumvent triggering the validation onBlur first. */\n  function handleClearSelection() {\n    onChange?.(null); // calls onChange only if it's not required\n  }\n\n  return (\n    <>\n      <Divider />\n      <Flex\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        flexWrap=\"wrap-reverse\"\n        flex={1}\n        gap={4}\n        className={styles.footer}\n      >\n        <Flex\n          justifyContent={clearable ? 'flex-start' : 'space-between'}\n          alignItems=\"center\"\n          flexShrink={1}\n          flexGrow={1}\n          className={clsx(globalSprinkles({ paddingLeft: 6 }), {\n            [globalSprinkles({ paddingTop: 4, paddingBottom: 4 })]: !clearable,\n          })}\n        >\n          <Text className={styles.hint}>{timeZoneWithOffset}</Text>\n          {clearable && <Divider orientation=\"vertical\" />}\n          <Text\n            as={ExternalLink}\n            href=\"https://dt-url.net/timeframe-selector\"\n            textStyle=\"small\"\n            style={{ paddingRight: Spacings.Size6 }}\n            data-dt-name=\"LearnMore\"\n          >\n            {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.docsLinkText)}\n          </Text>\n        </Flex>\n        {clearable && (\n          <Button\n            type=\"reset\"\n            onPointerDown={handleClearSelection}\n            size=\"condensed\"\n          >\n            {intl.formatMessage(\n              TIMEFRAME_SELECTOR_MESSAGES.resetTimeframeButton,\n            )}\n          </Button>\n        )}\n      </Flex>\n    </>\n  );\n};\n\n(\n  TimeframeSelectorOverlayFooter as typeof TimeframeSelectorOverlayFooter & {\n    displayName: string;\n  }\n).displayName = 'TimeframeSelectorOverlayFooter';\n"],
-  "mappings": "AAwDI,mBACE,KASE,YAVJ;AAxDJ,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,OAAO,cAAc;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAGrC,MAAM,iCAAiC,CAC5C,UACG;AACH,QAAM,EAAE,WAAW,SAAS,IAAI;AAChC,QAAM,OAAO,QAAQ;AAErB,QAAM,qBAAqB,QAAQ,MAAM;AACvC,UAAM,WAAW,YAAY;AAE7B,UAAM,QAAQ,IAAI,KAAK,eAAe,kBAAkB,GAAG;AAAA,MACzD;AAAA,MACA,cAAc;AAAA,IAChB,CAAC,EAAE,cAAc,WAAW,GAAG,QAAQ,CAAC;AACxC,UAAM,iBAAiB,IAAI,KAAK,eAAe,kBAAkB,GAAG;AAAA,MAClE;AAAA,MACA,cAAc;AAAA,IAChB,CAAC,EAAE,cAAc,WAAW,GAAG,QAAQ,CAAC;AACxC,UAAM,eAAe,OACjB,KAAK,CAAC,SAAS,KAAK,SAAS,cAAc,GAC3C,MAAM,QAAQ,OAAO,KAAK;AAC9B,UAAM,eAAe,iBAAiB,QAAQ,UAAU;AACxD,UAAM,kBAAkB,eAAe,KAAK,YAAY,MAAM;AAC9D,UAAM,oBAAoB,gBAAgB;AAAA,MACxC,CAAC,SAAS,KAAK,SAAS;AAAA,IAC1B,GAAG;AAEH,WAAO,GAAG,iBAAiB,GAAG,eAAe;AAAA,EAC/C,GAAG,CAAC,CAAC;AAGL,WAAS,uBAAuB;AAC9B,eAAW,IAAI;AAAA,EACjB;AAEA,SACE,iCACE;AAAA,wBAAC,WAAQ;AAAA,IACT;AAAA,MAAC;AAAA;AAAA,QACC,gBAAe;AAAA,QACf,YAAW;AAAA,QACX,UAAS;AAAA,QACT,MAAM;AAAA,QACN,KAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAElB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,gBAAgB,YAAY,eAAe;AAAA,cAC3C,YAAW;AAAA,cACX,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,WAAW,KAAK,gBAAgB,EAAE,aAAa,EAAE,CAAC,GAAG;AAAA,gBACnD,CAAC,gBAAgB,EAAE,YAAY,GAAG,eAAe,EAAE,CAAC,CAAC,GAAG,CAAC;AAAA,cAC3D,CAAC;AAAA,cAED;AAAA,oCAAC,QAAK,WAAW,OAAO,MAAO,8BAAmB;AAAA,gBACjD,aAAa,oBAAC,WAAQ,aAAY,YAAW;AAAA,gBAC9C;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,OAAO,EAAE,cAAc,SAAS,MAAM;AAAA,oBACtC,gBAAa;AAAA,oBAEZ,eAAK,cAAc,4BAA4B,YAAY;AAAA;AAAA,gBAC9D;AAAA;AAAA;AAAA,UACF;AAAA,UACC,aACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,eAAe;AAAA,cACf,MAAK;AAAA,cAEJ,eAAK;AAAA,gBACJ,4BAA4B;AAAA,cAC9B;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAGE,+BAGA,cAAc;",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport clsx from 'clsx';\nimport { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport {\n  getRegionalFormat,\n  getTimezone,\n} from '@dynatrace-sdk/user-preferences';\n\nimport * as styles from './TimeframeSelectorOverlay.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport { Divider } from '../../../../layouts/divider/Divider.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { globalSprinkles } from '../../../../styles/safe-sprinkles.js';\nimport { ExternalLink } from '../../../../typography/external-link/ExternalLink.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from '../../TimeframeSelector.types.js';\n\nexport const TimeframeSelectorOverlayFooter = (\n  props: Pick<TimeframeSelectorProps, 'clearable'>,\n) => {\n  /* eslint-disable @typescript-eslint/no-deprecated */\n  const { clearable } = props;\n  const intl = useIntl();\n\n  const setValue = useTimeframeSelectorStore(\n    (state) => state.setTimeframeSelectorTimeframe,\n  );\n\n  const timeZoneWithOffset = useMemo(() => {\n    const timeZone = getTimezone();\n\n    const parts = new Intl.DateTimeFormat(getRegionalFormat(), {\n      timeZone,\n      timeZoneName: 'shortOffset',\n    }).formatToParts(TZDateMini.tz(timeZone));\n    const partsShortName = new Intl.DateTimeFormat(getRegionalFormat(), {\n      timeZone,\n      timeZoneName: 'short',\n    }).formatToParts(TZDateMini.tz(timeZone));\n    const timeZonePart = parts\n      ?.find((part) => part.type === 'timeZoneName')\n      ?.value.replace('GMT', 'UTC');\n    const timeZoneInfo = timeZonePart === 'UTC' ? 'UTC+0' : timeZonePart;\n    const timezoneDetails = timeZoneInfo ? ` (${timeZoneInfo})` : '';\n    const timeZoneShortName = partsShortName?.find(\n      (part) => part.type === 'timeZoneName',\n    )?.value;\n\n    return `${timeZoneShortName}${timezoneDetails}`;\n  }, []);\n\n  /** Handles the clear selection. Uses the pointerDown event to circumvent triggering the validation onBlur first. */\n  function handleClearSelection() {\n    setValue(null);\n  }\n\n  return (\n    <>\n      <Divider />\n      <Flex\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        flexWrap=\"wrap-reverse\"\n        flex={1}\n        gap={4}\n        className={styles.footer}\n      >\n        <Flex\n          justifyContent={clearable ? 'flex-start' : 'space-between'}\n          alignItems=\"center\"\n          flexShrink={1}\n          flexGrow={1}\n          className={clsx(globalSprinkles({ paddingLeft: 6 }), {\n            [globalSprinkles({ paddingTop: 4, paddingBottom: 4 })]: !clearable,\n          })}\n        >\n          <Text className={styles.hint}>{timeZoneWithOffset}</Text>\n          {clearable && <Divider orientation=\"vertical\" />}\n          <Text\n            as={ExternalLink}\n            href=\"https://dt-url.net/timeframe-selector\"\n            textStyle=\"small\"\n            style={{ paddingRight: Spacings.Size6 }}\n            data-dt-name=\"LearnMore\"\n          >\n            {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.docsLinkText)}\n          </Text>\n        </Flex>\n        {clearable && (\n          <Button\n            type=\"reset\"\n            onPointerDown={handleClearSelection}\n            size=\"condensed\"\n          >\n            {intl.formatMessage(\n              TIMEFRAME_SELECTOR_MESSAGES.resetTimeframeButton,\n            )}\n          </Button>\n        )}\n      </Flex>\n    </>\n  );\n};\n\n(\n  TimeframeSelectorOverlayFooter as typeof TimeframeSelectorOverlayFooter & {\n    displayName: string;\n  }\n).displayName = 'TimeframeSelectorOverlayFooter';\n"],
+  "mappings": "AA8DI,mBACE,KASE,YAVJ;AA9DJ,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,OAAO,cAAc;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,iCAAiC;AAC1C,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAGrC,MAAM,iCAAiC,CAC5C,UACG;AAEH,QAAM,EAAE,UAAU,IAAI;AACtB,QAAM,OAAO,QAAQ;AAErB,QAAM,WAAW;AAAA,IACf,CAAC,UAAU,MAAM;AAAA,EACnB;AAEA,QAAM,qBAAqB,QAAQ,MAAM;AACvC,UAAM,WAAW,YAAY;AAE7B,UAAM,QAAQ,IAAI,KAAK,eAAe,kBAAkB,GAAG;AAAA,MACzD;AAAA,MACA,cAAc;AAAA,IAChB,CAAC,EAAE,cAAc,WAAW,GAAG,QAAQ,CAAC;AACxC,UAAM,iBAAiB,IAAI,KAAK,eAAe,kBAAkB,GAAG;AAAA,MAClE;AAAA,MACA,cAAc;AAAA,IAChB,CAAC,EAAE,cAAc,WAAW,GAAG,QAAQ,CAAC;AACxC,UAAM,eAAe,OACjB,KAAK,CAAC,SAAS,KAAK,SAAS,cAAc,GAC3C,MAAM,QAAQ,OAAO,KAAK;AAC9B,UAAM,eAAe,iBAAiB,QAAQ,UAAU;AACxD,UAAM,kBAAkB,eAAe,KAAK,YAAY,MAAM;AAC9D,UAAM,oBAAoB,gBAAgB;AAAA,MACxC,CAAC,SAAS,KAAK,SAAS;AAAA,IAC1B,GAAG;AAEH,WAAO,GAAG,iBAAiB,GAAG,eAAe;AAAA,EAC/C,GAAG,CAAC,CAAC;AAGL,WAAS,uBAAuB;AAC9B,aAAS,IAAI;AAAA,EACf;AAEA,SACE,iCACE;AAAA,wBAAC,WAAQ;AAAA,IACT;AAAA,MAAC;AAAA;AAAA,QACC,gBAAe;AAAA,QACf,YAAW;AAAA,QACX,UAAS;AAAA,QACT,MAAM;AAAA,QACN,KAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAElB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,gBAAgB,YAAY,eAAe;AAAA,cAC3C,YAAW;AAAA,cACX,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,WAAW,KAAK,gBAAgB,EAAE,aAAa,EAAE,CAAC,GAAG;AAAA,gBACnD,CAAC,gBAAgB,EAAE,YAAY,GAAG,eAAe,EAAE,CAAC,CAAC,GAAG,CAAC;AAAA,cAC3D,CAAC;AAAA,cAED;AAAA,oCAAC,QAAK,WAAW,OAAO,MAAO,8BAAmB;AAAA,gBACjD,aAAa,oBAAC,WAAQ,aAAY,YAAW;AAAA,gBAC9C;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,OAAO,EAAE,cAAc,SAAS,MAAM;AAAA,oBACtC,gBAAa;AAAA,oBAEZ,eAAK,cAAc,4BAA4B,YAAY;AAAA;AAAA,gBAC9D;AAAA;AAAA;AAAA,UACF;AAAA,UACC,aACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,eAAe;AAAA,cACf,MAAK;AAAA,cAEJ,eAAK;AAAA,gBACJ,4BAA4B;AAAA,cAC9B;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAGE,+BAGA,cAAc;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/presets/PresetItem.js

@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import {
   useCallback,
-  useContext,
   useEffect,
   useRef,
   useState
@@ -12,16 +11,17 @@ import { HistoryIcon } from "@dynatrace/strato-icons";
 import * as styles from "./Presets.sty.js";
 import { useId } from "../../../../core/hooks/useId.js";
 import { useFocusRing } from "../../../../core/styles/useFocusRing.js";
+import { useTimeframeSelectorStore } from "../../../../core/time/timeframeStore/useTimeframeStore.js";
 import { mergeProps } from "../../../../core/utils/merge-props.js";
-import { SelectedOverCalendarContext } from "../../../../forms/date-time-range-picker/contexts/SelectedOverCalendarContext.js";
-import { removePrecisionFromTimeValue } from "../../../../forms/date-time-range-picker/helpers.js";
-import { parseValue } from "../../../../forms/forms-core/time/timeParser.js";
+import {
+  parseValue,
+  removePrecisionFromTimeValue
+} from "../../../../forms/forms-core/time/timeParser.js";
 import { Flex } from "../../../../layouts/flex/Flex.js";
 import { Grid } from "../../../../layouts/grid/Grid.js";
 import { Tooltip } from "../../../../overlays/tooltip/Tooltip.js";
 import { Text } from "../../../../typography/text/Text.js";
 import { TIMEFRAME_SELECTOR_MESSAGES } from "../../constants/timeframeSelectorMessages.js";
-import { useInternalTimeframeSelectorContext } from "../../hooks/useInternalTimeframeSelectorContext.js";
 import { usePresetItemContext } from "../../hooks/usePresetItemContext.js";
 import { useTimeframeSelectorContext } from "../../hooks/useTimeframeSelectorContext.js";
 import { useTooltipMessages } from "../../hooks/useTooltipMessages.js";
@@ -41,10 +41,15 @@ const PresetItem = (props) => {
   } = props;
   const intl = useIntl();
   const [openTooltip, setOpenTooltip] = useState(false);
-  const { onChange, details } = useTimeframeSelectorContext();
-  const { min, max, precision } = useInternalTimeframeSelectorContext();
+  const { details } = useTimeframeSelectorContext();
+  const setValue = useTimeframeSelectorStore(
+    (state2) => state2.setTimeframeSelectorTimeframe
+  );
+  const min = useTimeframeSelectorStore((state2) => state2.min?.value);
+  const max = useTimeframeSelectorStore((state2) => state2.max?.value);
+  const precision = useTimeframeSelectorStore((state2) => state2.precision);
   const { isRecent } = usePresetItemContext();
-  const isSelected = isPresetSelected(value, details, precision, isRecent);
+  const isSelected = isPresetSelected(value, details, isRecent, precision);
   const isDisabled = isOutsideRange(value, min, max);
   const tooltipId = useId();
   const tooltipFocusProps = {
@@ -69,23 +74,21 @@ const PresetItem = (props) => {
     tooltipFormattedTimeValueEnd,
     isAbsoluteTimeframe,
     isInvalid
-  } = useTooltipMessages(value, precision, children);
-  const { setSelectedOverCalendar } = useContext(SelectedOverCalendarContext);
+  } = useTooltipMessages(value, children);
   const handleItemClick = useCallback(() => {
     if (isDisabled) {
       return;
     }
     const { from, to } = parseValue(value);
     if (from && to) {
-      setSelectedOverCalendar?.(false);
       const timeframe = {
         from: removePrecisionFromTimeValue(from, precision) ?? from,
         to: removePrecisionFromTimeValue(to, precision) ?? to
       };
-      onChange(timeframe);
+      setValue(timeframe);
       saveRecentTimeframe(timeframe);
     }
-  }, [isDisabled, value, setSelectedOverCalendar, onChange, precision]);
+  }, [isDisabled, value, precision, setValue]);
   const handleItemKeyDown = useCallback(
     (event) => {
       if (isDisabled) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/presets/PresetItem.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type KeyboardEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { HistoryIcon } from '@dynatrace/strato-icons';\n\nimport type { PresetItemVariants } from './Presets.sty.js';\nimport * as styles from './Presets.sty.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { useFocusRing } from '../../../../core/styles/useFocusRing.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport { SelectedOverCalendarContext } from '../../../../forms/date-time-range-picker/contexts/SelectedOverCalendarContext.js';\nimport { removePrecisionFromTimeValue } from '../../../../forms/date-time-range-picker/helpers.js';\nimport { parseValue } from '../../../../forms/forms-core/time/timeParser.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport { useInternalTimeframeSelectorContext } from '../../hooks/useInternalTimeframeSelectorContext.js';\nimport { usePresetItemContext } from '../../hooks/usePresetItemContext.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\nimport { useTooltipMessages } from '../../hooks/useTooltipMessages.js';\nimport {\n  isPresetSelected,\n  saveRecentTimeframe,\n} from '../../utils/presets-helpers.js';\nimport { isOutsideRange } from '../../utils/timeframe-selection.js';\n\n//#region Typings\n\n/**\n * @public\n */\nexport interface TimeframeSelectorPresetItemProps\n  extends HTMLAttributes<HTMLLIElement>,\n    DataTestId,\n    StylingProps,\n    WithChildren {\n  /** The value of the timeframe preset. */\n  value: {\n    /** Start of the time frame. */\n    from: string;\n    /** End of the time frame. */\n    to: string;\n  };\n}\n//#endregion\n\n/**\n * TimeframeSelector preset item shown inside the presets list of the overlay.\n * @public\n */\nexport const PresetItem = (\n  props: TimeframeSelectorPresetItemProps & {\n    // DEPRECATION: [APPDEV-16622] BREAKING-CHANGE: TimeframeSelector - Remove deprecated `_isSelected` prop.\n    /**\n     * @deprecated - Prop will be removed with the next breaking change cycle.\n     */\n    _isSelected?: boolean;\n  },\n) => {\n  const {\n    children,\n    value,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: TimeframeSelectorPresetItemProps & { _isSelected?: boolean } = props;\n\n  const intl = useIntl();\n  const [openTooltip, setOpenTooltip] = useState(false);\n\n  const { onChange, details } = useTimeframeSelectorContext();\n  const { min, max, precision } = useInternalTimeframeSelectorContext();\n  const { isRecent } = usePresetItemContext();\n\n  const isSelected = isPresetSelected(value, details, precision, isRecent);\n  const isDisabled = isOutsideRange(value, min, max);\n\n  const tooltipId = useId();\n  const tooltipFocusProps = {\n    onFocus: useCallback(\n      () => !isDisabled && setOpenTooltip(true),\n      [isDisabled],\n    ),\n    onBlur: useCallback(() => setOpenTooltip(false), []),\n  };\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: isSelected && !isDisabled ? 'primary' : 'neutral',\n    disabled: isDisabled,\n  });\n\n  let state: NonNullable<PresetItemVariants>['state'] = isSelected\n    ? 'selected'\n    : 'rest';\n  if (isDisabled) {\n    state = 'disabled';\n  }\n\n  const {\n    timeframeDisplayValue,\n    formattedPresetItemValue,\n    tooltipFormattedTimeValueStart,\n    tooltipFormattedTimeValueEnd,\n    isAbsoluteTimeframe,\n    isInvalid,\n  } = useTooltipMessages(value, precision, children);\n\n  const { setSelectedOverCalendar } = useContext(SelectedOverCalendarContext);\n\n  /** Handle clicking on the timeframe selector preset item. Uses pointerdown event so that the validation on blur doesn't trigger first. */\n  const handleItemClick = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    const { from, to } = parseValue(value);\n\n    if (from && to) {\n      // should set selectedOverCalendar when a preset is selected.\n      setSelectedOverCalendar?.(false);\n\n      const timeframe = {\n        from: removePrecisionFromTimeValue(from, precision) ?? from,\n        to: removePrecisionFromTimeValue(to, precision) ?? to,\n      };\n\n      onChange(timeframe);\n      saveRecentTimeframe(timeframe);\n    }\n  }, [isDisabled, value, setSelectedOverCalendar, onChange, precision]);\n\n  /**\n   * Temporary keydown listener to provide the possibility to select items via keyboard\n   * Will change as soon as we switch to the reusable listbox component.\n   */\n  const handleItemKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLLIElement>) => {\n      if (isDisabled) {\n        return;\n      }\n\n      if (\n        event.code === 'Enter' ||\n        event.code === 'NumpadEnter' ||\n        event.code === 'Space'\n      ) {\n        handleItemClick();\n      }\n    },\n    [handleItemClick, isDisabled],\n  );\n\n  const liRef = useRef<HTMLLIElement | null>(null);\n\n  useEffect(() => {\n    if (isSelected) {\n      liRef.current?.scrollIntoView({ block: 'nearest' });\n    }\n    // we don't want to scroll the element into view when isSelected changes, but only on the first render\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (isInvalid) {\n    return null;\n  }\n\n  const tooltipContent = isDisabled ? (\n    <Text textStyle=\"small\">\n      {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.disabledTooltip)}\n    </Text>\n  ) : (\n    <Flex flexDirection=\"column\">\n      <Flex gap={0} flexDirection=\"column\">\n        <Text textStyle=\"base-emphasized\">{timeframeDisplayValue}</Text>\n        <Text textStyle=\"small\">{formattedPresetItemValue}</Text>\n      </Flex>\n      {!isAbsoluteTimeframe && (\n        <Flex gap={0} flexDirection=\"column\">\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueStart}</Text>\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueEnd}</Text>\n        </Flex>\n      )}\n    </Flex>\n  );\n\n  return (\n    <li\n      ref={liRef}\n      role=\"option\"\n      aria-selected={isSelected}\n      aria-disabled={isDisabled}\n      className={clsx([\n        focusClassName,\n        styles.item({\n          state,\n        }),\n        consumerClassName,\n      ])}\n      onPointerDown={handleItemClick}\n      onKeyDown={handleItemKeyDown}\n      data-testid={dataTestId}\n      style={consumerStyle}\n      {...mergeProps(remainingProps, focusProps, tooltipFocusProps)}\n    >\n      <Tooltip\n        id={tooltipId}\n        text={tooltipContent}\n        placement=\"right\"\n        fallbackPlacements={[\n          'right-end',\n          'bottom-end',\n          'bottom',\n          'bottom-start',\n          'left-end',\n          'left',\n          'left-start',\n        ]}\n        open={openTooltip}\n        onOpenChange={setOpenTooltip}\n      >\n        <div\n          className={styles.wrapper({ isSelected, isDisabled })}\n          aria-describedby={tooltipId}\n        >\n          <Grid className={styles.itemContainer}>\n            <Flex alignItems=\"center\" className={styles.displayValueWrapper}>\n              {isRecent && <HistoryIcon className={styles.recentIcon} />}\n              <Text\n                textStyle=\"base-emphasized\"\n                as=\"div\"\n                className={styles.timeframeDisplayValue}\n              >\n                {timeframeDisplayValue}\n              </Text>\n            </Flex>\n            {(!isRecent || !isAbsoluteTimeframe) && (\n              <Text\n                as={Flex}\n                textStyle=\"small\"\n                className={clsx(\n                  styles.mediaQuery,\n                  styles.formattedPresetValue({\n                    state,\n                  }),\n                )}\n              >\n                {formattedPresetItemValue}\n              </Text>\n            )}\n          </Grid>\n        </div>\n      </Tooltip>\n    </li>\n  );\n};\n\nPresetItem.displayName = 'TimeframeSelector.PresetItem';\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { HistoryIcon } from '@dynatrace/strato-icons';\n\nimport type { PresetItemVariants } from './Presets.sty.js';\nimport * as styles from './Presets.sty.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { useFocusRing } from '../../../../core/styles/useFocusRing.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport {\n  parseValue,\n  removePrecisionFromTimeValue,\n} from '../../../../forms/forms-core/time/timeParser.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport { usePresetItemContext } from '../../hooks/usePresetItemContext.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\nimport { useTooltipMessages } from '../../hooks/useTooltipMessages.js';\nimport {\n  isPresetSelected,\n  saveRecentTimeframe,\n} from '../../utils/presets-helpers.js';\nimport { isOutsideRange } from '../../utils/timeframe-selection.js';\n\n//#region Typings\n\n/**\n * @public\n */\nexport interface TimeframeSelectorPresetItemProps\n  extends HTMLAttributes<HTMLLIElement>,\n    DataTestId,\n    StylingProps,\n    WithChildren {\n  /** The value of the timeframe preset. */\n  value: {\n    /** Start of the time frame. */\n    from: string;\n    /** End of the time frame. */\n    to: string;\n  };\n}\n//#endregion\n\n/**\n * TimeframeSelector preset item shown inside the presets list of the overlay.\n * @public\n */\nexport const PresetItem = (\n  props: TimeframeSelectorPresetItemProps & {\n    // DEPRECATION: [APPDEV-16622] BREAKING-CHANGE: TimeframeSelector - Remove deprecated `_isSelected` prop.\n    /**\n     * @deprecated - Prop will be removed with the next breaking change cycle.\n     */\n    _isSelected?: boolean;\n  },\n) => {\n  const {\n    children,\n    value,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: TimeframeSelectorPresetItemProps & { _isSelected?: boolean } = props;\n\n  const intl = useIntl();\n  const [openTooltip, setOpenTooltip] = useState(false);\n\n  const { details } = useTimeframeSelectorContext();\n\n  const setValue = useTimeframeSelectorStore(\n    (state) => state.setTimeframeSelectorTimeframe,\n  );\n  const min = useTimeframeSelectorStore((state) => state.min?.value);\n  const max = useTimeframeSelectorStore((state) => state.max?.value);\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n\n  const { isRecent } = usePresetItemContext();\n\n  const isSelected = isPresetSelected(value, details, isRecent, precision);\n  const isDisabled = isOutsideRange(value, min, max);\n\n  const tooltipId = useId();\n  const tooltipFocusProps = {\n    onFocus: useCallback(\n      () => !isDisabled && setOpenTooltip(true),\n      [isDisabled],\n    ),\n    onBlur: useCallback(() => setOpenTooltip(false), []),\n  };\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: isSelected && !isDisabled ? 'primary' : 'neutral',\n    disabled: isDisabled,\n  });\n\n  let state: NonNullable<PresetItemVariants>['state'] = isSelected\n    ? 'selected'\n    : 'rest';\n  if (isDisabled) {\n    state = 'disabled';\n  }\n\n  const {\n    timeframeDisplayValue,\n    formattedPresetItemValue,\n    tooltipFormattedTimeValueStart,\n    tooltipFormattedTimeValueEnd,\n    isAbsoluteTimeframe,\n    isInvalid,\n  } = useTooltipMessages(value, children);\n\n  /** Handle clicking on the timeframe selector preset item. Uses pointerdown event so that the validation on blur doesn't trigger first. */\n  const handleItemClick = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    const { from, to } = parseValue(value);\n\n    if (from && to) {\n      const timeframe = {\n        from: removePrecisionFromTimeValue(from, precision) ?? from,\n        to: removePrecisionFromTimeValue(to, precision) ?? to,\n      };\n\n      setValue(timeframe);\n      saveRecentTimeframe(timeframe);\n    }\n  }, [isDisabled, value, precision, setValue]);\n\n  /**\n   * Temporary keydown listener to provide the possibility to select items via keyboard\n   * Will change as soon as we switch to the reusable listbox component.\n   */\n  const handleItemKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLLIElement>) => {\n      if (isDisabled) {\n        return;\n      }\n\n      if (\n        event.code === 'Enter' ||\n        event.code === 'NumpadEnter' ||\n        event.code === 'Space'\n      ) {\n        handleItemClick();\n      }\n    },\n    [handleItemClick, isDisabled],\n  );\n\n  const liRef = useRef<HTMLLIElement | null>(null);\n\n  useEffect(() => {\n    if (isSelected) {\n      liRef.current?.scrollIntoView({ block: 'nearest' });\n    }\n    // we don't want to scroll the element into view when isSelected changes, but only on the first render\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (isInvalid) {\n    return null;\n  }\n\n  const tooltipContent = isDisabled ? (\n    <Text textStyle=\"small\">\n      {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.disabledTooltip)}\n    </Text>\n  ) : (\n    <Flex flexDirection=\"column\">\n      <Flex gap={0} flexDirection=\"column\">\n        <Text textStyle=\"base-emphasized\">{timeframeDisplayValue}</Text>\n        <Text textStyle=\"small\">{formattedPresetItemValue}</Text>\n      </Flex>\n      {!isAbsoluteTimeframe && (\n        <Flex gap={0} flexDirection=\"column\">\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueStart}</Text>\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueEnd}</Text>\n        </Flex>\n      )}\n    </Flex>\n  );\n\n  return (\n    <li\n      ref={liRef}\n      role=\"option\"\n      aria-selected={isSelected}\n      aria-disabled={isDisabled}\n      className={clsx([\n        focusClassName,\n        styles.item({\n          state,\n        }),\n        consumerClassName,\n      ])}\n      onPointerDown={handleItemClick}\n      onKeyDown={handleItemKeyDown}\n      data-testid={dataTestId}\n      style={consumerStyle}\n      {...mergeProps(remainingProps, focusProps, tooltipFocusProps)}\n    >\n      <Tooltip\n        id={tooltipId}\n        text={tooltipContent}\n        placement=\"right\"\n        fallbackPlacements={[\n          'right-end',\n          'bottom-end',\n          'bottom',\n          'bottom-start',\n          'left-end',\n          'left',\n          'left-start',\n        ]}\n        open={openTooltip}\n        onOpenChange={setOpenTooltip}\n      >\n        <div\n          className={styles.wrapper({ isSelected, isDisabled })}\n          aria-describedby={tooltipId}\n        >\n          <Grid className={styles.itemContainer}>\n            <Flex alignItems=\"center\" className={styles.displayValueWrapper}>\n              {isRecent && <HistoryIcon className={styles.recentIcon} />}\n              <Text\n                textStyle=\"base-emphasized\"\n                as=\"div\"\n                className={styles.timeframeDisplayValue}\n              >\n                {timeframeDisplayValue}\n              </Text>\n            </Flex>\n            {(!isRecent || !isAbsoluteTimeframe) && (\n              <Text\n                as={Flex}\n                textStyle=\"small\"\n                className={clsx(\n                  styles.mediaQuery,\n                  styles.formattedPresetValue({\n                    state,\n                  }),\n                )}\n              >\n                {formattedPresetItemValue}\n              </Text>\n            )}\n          </Grid>\n        </div>\n      </Tooltip>\n    </li>\n  );\n};\n\nPresetItem.displayName = 'TimeframeSelector.PresetItem';\n"],
+  "mappings": "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",
+  "names": ["state"]
 }

package/esm/filters/timeframe-selector/components/presets/Presets.css

@@ -1,11 +1,11 @@
-._14rlfn30-3-2-1 {
+._14rlfn30-3-3-1 {
   justify-content: space-between;
   align-items: center;
   grid: auto / auto-flow;
   grid-template-columns: auto 1fr;
   max-height: var(--dt-spacings-size-20, 20px);
 }
-._14rlfn31-3-2-1 {
+._14rlfn31-3-3-1 {
   position: relative;
   list-style: none;
   cursor: pointer;
@@ -16,45 +16,45 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   outline-offset: calc(var(--dt-spacings-size-2, 2px) * -1);
 }
-._14rlfn32-3-2-1 {
+._14rlfn32-3-3-1 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._14rlfn32-3-2-1:hover {
+._14rlfn32-3-3-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._14rlfn32-3-2-1:active {
+._14rlfn32-3-3-1:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._14rlfn33-3-2-1 {
+._14rlfn33-3-3-1 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn33-3-2-1:hover {
+._14rlfn33-3-3-1:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._14rlfn33-3-2-1:active {
+._14rlfn33-3-3-1:active {
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._14rlfn34-3-2-1 {
+._14rlfn34-3-3-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._14rlfn36-3-2-1 {
+._14rlfn36-3-3-1 {
   min-width: 0;
 }
-._14rlfn37-3-2-1 {
+._14rlfn37-3-3-1 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
 }
-._14rlfn38-3-2-1 {
+._14rlfn38-3-3-1 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._14rlfn39-3-2-1::before {
+._14rlfn39-3-3-1::before {
   content: "";
   position: absolute;
   width: 2px;
@@ -62,62 +62,62 @@
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3a-3-2-1::before {
+._14rlfn3a-3-3-1::before {
   content: "";
 }
-._14rlfn3b-3-2-1::before {
+._14rlfn3b-3-3-1::before {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3c-3-2-1::before {
+._14rlfn3c-3-3-1::before {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3e-3-2-1 {
+._14rlfn3e-3-3-1 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
   text-align: right;
 }
-._14rlfn3f-3-2-1 {
+._14rlfn3f-3-3-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14rlfn3g-3-2-1 {
+._14rlfn3g-3-3-1 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn3h-3-2-1 {
+._14rlfn3h-3-3-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._14rlfn3i-3-2-1 {
+._14rlfn3i-3-3-1 {
   position: absolute;
   width: 2px;
   height: 20px;
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3j-3-2-1 {
+._14rlfn3j-3-3-1 {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3k-3-2-1 {
+._14rlfn3k-3-3-1 {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3l-3-2-1 {
+._14rlfn3l-3-3-1 {
   position: relative;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
-._14rlfn3m-3-2-1 {
+._14rlfn3m-3-3-1 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-12, 12px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14rlfn3n-3-2-1 {
+._14rlfn3n-3-3-1 {
   flex-shrink: 0;
 }
 @media screen and (max-width: 470px) {
-  ._14rlfn3d-3-2-1 {
+  ._14rlfn3d-3-3-1 {
     display: none;
   }
 }

package/esm/filters/timeframe-selector/components/presets/Presets.js

@@ -49,7 +49,8 @@ const Presets = (props) => {
         PresetItem,
         {
           value: item,
-          "data-dt-name": "Preset"
+          "data-dt-name": "Preset",
+          "data-dt-properties": `valueFrom:${item.from},valueTo:${item.to}`
         },
         `${item.from} \u2192 ${item.to}`
       ))

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/presets/Presets.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { Children, type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PresetItem } from './PresetItem.js';\nimport * as styles from './Presets.sty.js';\nimport { AriaLabelingProps } from '../../../../core/types/a11y-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { DOMProps } from '../../../../core/types/dom.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { isSlot } from '../../../../core/utils/is-slot.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { TIMEFRAME_SELECTOR_PRESETS } from '../../constants/timeframe-presets.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface TimeframeSelectorPresetsProps\n  extends DOMProps,\n    DataTestId,\n    StylingProps,\n    AriaLabelingProps {\n  /** Children shown inside the presets list. A default list of presets is shown if no children are set. */\n  children?: ReactNode;\n}\n\n//#endregion\n\n/** Iterates over child nodes to extract preset item slots. */\nfunction getItemSlots(children: ReactNode): ReactNode[] | null {\n  if (!children) {\n    return null;\n  }\n\n  const validChildren: ReactNode[] = [];\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, PresetItem)) {\n      validChildren.push(child);\n    } else {\n      // do nothing if the child is null (when rendered conditionally for example) and throw a warning otherwise\n      devLog(\n        'The used child is not supported by the TimeframeSelector.Presets.',\n      );\n    }\n  }\n\n  return validChildren.length > 0 ? validChildren : null;\n}\n\n/**\n * A list of preset items shown in the overlay.\n * @public\n */\nexport const Presets = (props: TimeframeSelectorPresetsProps) => {\n  const {\n    children,\n    'aria-label': ariaLabel,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: TimeframeSelectorPresetsProps = props;\n  const intl = useIntl();\n\n  const presetsListLabel =\n    ariaLabel ??\n    intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.timeframePresets);\n\n  const validChildren = getItemSlots(children);\n\n  return (\n    <ul\n      role=\"listbox\"\n      aria-label={presetsListLabel}\n      className={clsx([styles.listContainer, consumerClassName])}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      {...remainingProps}\n    >\n      {validChildren ??\n        TIMEFRAME_SELECTOR_PRESETS.map((item) => (\n          <PresetItem\n            key={`${item.from} \u2192 ${item.to}`}\n            value={item}\n            data-dt-name=\"Preset\"\n          />\n        ))}\n    </ul>\n  );\n};\n\nPresets['displayName'] = 'TimeframeSelector.Presets';\n"],
-  "mappings": "AAmFU;AAnFV,OAAO,UAAU;AACjB,SAAS,gBAAgC;AACzC,SAAS,eAAe;AAExB,SAAS,kBAAkB;AAC3B,YAAY,YAAY;AAKxB,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,kCAAkC;AAC3C,SAAS,mCAAmC;AAkB5C,SAAS,aAAa,UAAyC;AAC7D,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM,gBAA6B,CAAC;AACpC,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,OAAO,OAAO,UAAU,GAAG;AAC7B,oBAAc,KAAK,KAAK;AAAA,IAC1B,OAAO;AAEL;AAAA,QACE;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,cAAc,SAAS,IAAI,gBAAgB;AACpD;AAMO,MAAM,UAAU,CAAC,UAAyC;AAC/D,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAmC;AACnC,QAAM,OAAO,QAAQ;AAErB,QAAM,mBACJ,aACA,KAAK,cAAc,4BAA4B,gBAAgB;AAEjE,QAAM,gBAAgB,aAAa,QAAQ;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,KAAK,CAAC,OAAO,eAAe,iBAAiB,CAAC;AAAA,MACzD,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH,2BACC,2BAA2B,IAAI,CAAC,SAC9B;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO;AAAA,UACP,gBAAa;AAAA;AAAA,QAFR,GAAG,KAAK,IAAI,WAAM,KAAK,EAAE;AAAA,MAGhC,CACD;AAAA;AAAA,EACL;AAEJ;AAEA,QAAQ,aAAa,IAAI;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { Children, type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PresetItem } from './PresetItem.js';\nimport * as styles from './Presets.sty.js';\nimport { AriaLabelingProps } from '../../../../core/types/a11y-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { DOMProps } from '../../../../core/types/dom.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { isSlot } from '../../../../core/utils/is-slot.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { TIMEFRAME_SELECTOR_PRESETS } from '../../constants/timeframe-presets.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface TimeframeSelectorPresetsProps\n  extends DOMProps,\n    DataTestId,\n    StylingProps,\n    AriaLabelingProps {\n  /** Children shown inside the presets list. A default list of presets is shown if no children are set. */\n  children?: ReactNode;\n}\n\n//#endregion\n\n/** Iterates over child nodes to extract preset item slots. */\nfunction getItemSlots(children: ReactNode): ReactNode[] | null {\n  if (!children) {\n    return null;\n  }\n\n  const validChildren: ReactNode[] = [];\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, PresetItem)) {\n      validChildren.push(child);\n    } else {\n      // do nothing if the child is null (when rendered conditionally for example) and throw a warning otherwise\n      devLog(\n        'The used child is not supported by the TimeframeSelector.Presets.',\n      );\n    }\n  }\n\n  return validChildren.length > 0 ? validChildren : null;\n}\n\n/**\n * A list of preset items shown in the overlay.\n * @public\n */\nexport const Presets = (props: TimeframeSelectorPresetsProps) => {\n  const {\n    children,\n    'aria-label': ariaLabel,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: TimeframeSelectorPresetsProps = props;\n  const intl = useIntl();\n\n  const presetsListLabel =\n    ariaLabel ??\n    intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.timeframePresets);\n\n  const validChildren = getItemSlots(children);\n\n  return (\n    <ul\n      role=\"listbox\"\n      aria-label={presetsListLabel}\n      className={clsx([styles.listContainer, consumerClassName])}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      {...remainingProps}\n    >\n      {validChildren ??\n        TIMEFRAME_SELECTOR_PRESETS.map((item) => (\n          <PresetItem\n            key={`${item.from} \u2192 ${item.to}`}\n            value={item}\n            data-dt-name=\"Preset\"\n            data-dt-properties={`valueFrom:${item.from},valueTo:${item.to}`}\n          />\n        ))}\n    </ul>\n  );\n};\n\nPresets['displayName'] = 'TimeframeSelector.Presets';\n"],
+  "mappings": "AAmFU;AAnFV,OAAO,UAAU;AACjB,SAAS,gBAAgC;AACzC,SAAS,eAAe;AAExB,SAAS,kBAAkB;AAC3B,YAAY,YAAY;AAKxB,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,kCAAkC;AAC3C,SAAS,mCAAmC;AAkB5C,SAAS,aAAa,UAAyC;AAC7D,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM,gBAA6B,CAAC;AACpC,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,OAAO,OAAO,UAAU,GAAG;AAC7B,oBAAc,KAAK,KAAK;AAAA,IAC1B,OAAO;AAEL;AAAA,QACE;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,cAAc,SAAS,IAAI,gBAAgB;AACpD;AAMO,MAAM,UAAU,CAAC,UAAyC;AAC/D,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAmC;AACnC,QAAM,OAAO,QAAQ;AAErB,QAAM,mBACJ,aACA,KAAK,cAAc,4BAA4B,gBAAgB;AAEjE,QAAM,gBAAgB,aAAa,QAAQ;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,KAAK,CAAC,OAAO,eAAe,iBAAiB,CAAC;AAAA,MACzD,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH,2BACC,2BAA2B,IAAI,CAAC,SAC9B;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO;AAAA,UACP,gBAAa;AAAA,UACb,sBAAoB,aAAa,KAAK,IAAI,YAAY,KAAK,EAAE;AAAA;AAAA,QAHxD,GAAG,KAAK,IAAI,WAAM,KAAK,EAAE;AAAA,MAIhC,CACD;AAAA;AAAA,EACL;AAEJ;AAEA,QAAQ,aAAa,IAAI;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/presets/Presets.sty.js

@@ -1,16 +1,16 @@
 import "./Presets.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var displayValueWrapper = "_14rlfn36-3-2-1";
-var formattedPresetValue = _7a468({ defaultClassName: "_14rlfn3e-3-2-1", variantClassNames: { state: { rest: "_14rlfn3f-3-2-1", selected: "_14rlfn3g-3-2-1", disabled: "_14rlfn3h-3-2-1" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
-var indicatorIcon = _7a468({ defaultClassName: "_14rlfn3i-3-2-1", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-2-1", false: "_14rlfn3k-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
-var item = _7a468({ defaultClassName: "_14rlfn31-3-2-1", variantClassNames: { state: { rest: "_14rlfn32-3-2-1", selected: "_14rlfn33-3-2-1", disabled: "_14rlfn34-3-2-1" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
-var itemContainer = "_14rlfn30-3-2-1";
-var listContainer = "_14rlfn3l-3-2-1";
-var mediaQuery = "_14rlfn3d-3-2-1";
-var recentHeading = "_14rlfn3m-3-2-1";
-var recentIcon = "_14rlfn3n-3-2-1";
-var timeframeDisplayValue = "_14rlfn37-3-2-1";
-var wrapper = _7a468({ defaultClassName: "_14rlfn38-3-2-1", variantClassNames: { isSelected: { true: "_14rlfn39-3-2-1", false: "_14rlfn3a-3-2-1" }, isDisabled: { true: "_14rlfn3b-3-2-1", false: "_14rlfn3c-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
+var displayValueWrapper = "_14rlfn36-3-3-1";
+var formattedPresetValue = _7a468({ defaultClassName: "_14rlfn3e-3-3-1", variantClassNames: { state: { rest: "_14rlfn3f-3-3-1", selected: "_14rlfn3g-3-3-1", disabled: "_14rlfn3h-3-3-1" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
+var indicatorIcon = _7a468({ defaultClassName: "_14rlfn3i-3-3-1", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-3-1", false: "_14rlfn3k-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });
+var item = _7a468({ defaultClassName: "_14rlfn31-3-3-1", variantClassNames: { state: { rest: "_14rlfn32-3-3-1", selected: "_14rlfn33-3-3-1", disabled: "_14rlfn34-3-3-1" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
+var itemContainer = "_14rlfn30-3-3-1";
+var listContainer = "_14rlfn3l-3-3-1";
+var mediaQuery = "_14rlfn3d-3-3-1";
+var recentHeading = "_14rlfn3m-3-3-1";
+var recentIcon = "_14rlfn3n-3-3-1";
+var timeframeDisplayValue = "_14rlfn37-3-3-1";
+var wrapper = _7a468({ defaultClassName: "_14rlfn38-3-3-1", variantClassNames: { isSelected: { true: "_14rlfn39-3-3-1", false: "_14rlfn3a-3-3-1" }, isDisabled: { true: "_14rlfn3b-3-3-1", false: "_14rlfn3c-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   displayValueWrapper,
   formattedPresetValue,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/presets/Presets.css.ts"],
-  "sourcesContent": ["import './Presets.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var displayValueWrapper = '_14rlfn36-3-2-1';\nexport var formattedPresetValue = _7a468({defaultClassName:'_14rlfn3e-3-2-1',variantClassNames:{state:{rest:'_14rlfn3f-3-2-1',selected:'_14rlfn3g-3-2-1',disabled:'_14rlfn3h-3-2-1'}},defaultVariants:{state:'rest'},compoundVariants:[]});\nexport var indicatorIcon = _7a468({defaultClassName:'_14rlfn3i-3-2-1',variantClassNames:{isDisabled:{true:'_14rlfn3j-3-2-1',false:'_14rlfn3k-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var item = _7a468({defaultClassName:'_14rlfn31-3-2-1',variantClassNames:{state:{rest:'_14rlfn32-3-2-1',selected:'_14rlfn33-3-2-1',disabled:'_14rlfn34-3-2-1'},defaultVariants:{state:'rest'}},defaultVariants:{},compoundVariants:[]});\nexport var itemContainer = '_14rlfn30-3-2-1';\nexport var listContainer = '_14rlfn3l-3-2-1';\nexport var mediaQuery = '_14rlfn3d-3-2-1';\nexport var recentHeading = '_14rlfn3m-3-2-1';\nexport var recentIcon = '_14rlfn3n-3-2-1';\nexport var timeframeDisplayValue = '_14rlfn37-3-2-1';\nexport var wrapper = _7a468({defaultClassName:'_14rlfn38-3-2-1',variantClassNames:{isSelected:{true:'_14rlfn39-3-2-1',false:'_14rlfn3a-3-2-1'},isDisabled:{true:'_14rlfn3b-3-2-1',false:'_14rlfn3c-3-2-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Presets.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var displayValueWrapper = '_14rlfn36-3-3-1';\nexport var formattedPresetValue = _7a468({defaultClassName:'_14rlfn3e-3-3-1',variantClassNames:{state:{rest:'_14rlfn3f-3-3-1',selected:'_14rlfn3g-3-3-1',disabled:'_14rlfn3h-3-3-1'}},defaultVariants:{state:'rest'},compoundVariants:[]});\nexport var indicatorIcon = _7a468({defaultClassName:'_14rlfn3i-3-3-1',variantClassNames:{isDisabled:{true:'_14rlfn3j-3-3-1',false:'_14rlfn3k-3-3-1'}},defaultVariants:{},compoundVariants:[]});\nexport var item = _7a468({defaultClassName:'_14rlfn31-3-3-1',variantClassNames:{state:{rest:'_14rlfn32-3-3-1',selected:'_14rlfn33-3-3-1',disabled:'_14rlfn34-3-3-1'},defaultVariants:{state:'rest'}},defaultVariants:{},compoundVariants:[]});\nexport var itemContainer = '_14rlfn30-3-3-1';\nexport var listContainer = '_14rlfn3l-3-3-1';\nexport var mediaQuery = '_14rlfn3d-3-3-1';\nexport var recentHeading = '_14rlfn3m-3-3-1';\nexport var recentIcon = '_14rlfn3n-3-3-1';\nexport var timeframeDisplayValue = '_14rlfn37-3-3-1';\nexport var wrapper = _7a468({defaultClassName:'_14rlfn38-3-3-1',variantClassNames:{isSelected:{true:'_14rlfn39-3-3-1',false:'_14rlfn3a-3-3-1'},isDisabled:{true:'_14rlfn3b-3-3-1',false:'_14rlfn3c-3-3-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB;AAC1B,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,MAAK,mBAAkB,UAAS,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,OAAM,OAAM,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClO,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtL,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,MAAK,mBAAkB,UAAS,mBAAkB,UAAS,kBAAiB,GAAE,iBAAgB,EAAC,OAAM,OAAM,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrO,IAAI,gBAAgB;AACpB,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,wBAAwB;AAC5B,IAAI,UAAU,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -45,11 +45,12 @@ const RecentTimeframes = () => {
           role: "listbox",
           className: styles.listContainer,
           "aria-label": ariaLabel,
-          children: /* @__PURE__ */ jsx(PresetItemContext.Provider, { value: presetItemContextValue, children: data.recentPresets.map(({ timeframe }) => /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx(PresetItemContext.Provider, { value: presetItemContextValue, children: data.recentPresets.map(({ timeframe }, index) => /* @__PURE__ */ jsx(
             PresetItem,
             {
               value: timeframe,
-              "data-dt-name": "Recent"
+              "data-dt-name": "Recent",
+              "data-dt-properties": `index:${index},valueFrom:${timeframe.from},valueTo:${timeframe.to}`
             },
             `${timeframe.from} \u2192 ${timeframe.to}`
           )) })

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": []
 }