@dynatrace/strato-components 3.0.1 → 3.1.0

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

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Children } from "react";
+import { useIntl } from "react-intl";
+import { PresetItem } from "./PresetItem.js";
+import * as styles from "./Presets.sty.js";
+import { isSlot } from "../../../../core/utils/is-slot.js";
+import { devLog } from "../../../../core/utils/logging.js";
+import { TIMEFRAME_SELECTOR_PRESETS } from "../../constants/timeframe-presets.js";
+import { TIMEFRAME_SELECTOR_MESSAGES } from "../../constants/timeframeSelectorMessages.js";
+function getItemSlots(children) {
+  if (!children) {
+    return null;
+  }
+  const validChildren = [];
+  for (const child of Children.toArray(children)) {
+    if (isSlot(child, PresetItem)) {
+      validChildren.push(child);
+    } else {
+      devLog(
+        "The used child is not supported by the TimeframeSelector.Presets."
+      );
+    }
+  }
+  return validChildren.length > 0 ? validChildren : null;
+}
+const Presets = (props) => {
+  const {
+    children,
+    "aria-label": ariaLabel,
+    className: consumerClassName,
+    style: consumerStyle,
+    "data-testid": dataTestId,
+    ...remainingProps
+  } = props;
+  const intl = useIntl();
+  const presetsListLabel = ariaLabel ?? intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.timeframePresets);
+  const validChildren = getItemSlots(children);
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      role: "listbox",
+      "aria-label": presetsListLabel,
+      className: clsx([styles.listContainer, consumerClassName]),
+      style: consumerStyle,
+      "data-testid": dataTestId,
+      ...remainingProps,
+      children: validChildren ?? TIMEFRAME_SELECTOR_PRESETS.map((item) => /* @__PURE__ */ jsx(PresetItem, { value: item }, `${item.from} \u2192 ${item.to}`))
+    }
+  );
+};
+Presets["displayName"] = "TimeframeSelector.Presets";
+export {
+  Presets
+};
+//# sourceMappingURL=Presets.js.map

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

@@ -0,0 +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 key={`${item.from} \u2192 ${item.to}`} value={item} />\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,oBAAC,cAA6C,OAAO,QAApC,GAAG,KAAK,IAAI,WAAM,KAAK,EAAE,EAAiB,CAC5D;AAAA;AAAA,EACL;AAEJ;AAEA,QAAQ,aAAa,IAAI;",
+  "names": []
+}

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

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

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

@@ -0,0 +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-1-0';\nexport var formattedPresetValue = _7a468({defaultClassName:'_14rlfn3e-3-1-0',variantClassNames:{state:{rest:'_14rlfn3f-3-1-0',selected:'_14rlfn3g-3-1-0',disabled:'_14rlfn3h-3-1-0'}},defaultVariants:{state:'rest'},compoundVariants:[]});\nexport var indicatorIcon = _7a468({defaultClassName:'_14rlfn3i-3-1-0',variantClassNames:{isDisabled:{true:'_14rlfn3j-3-1-0',false:'_14rlfn3k-3-1-0'}},defaultVariants:{},compoundVariants:[]});\nexport var item = _7a468({defaultClassName:'_14rlfn31-3-1-0',variantClassNames:{state:{rest:'_14rlfn32-3-1-0',selected:'_14rlfn33-3-1-0',disabled:'_14rlfn34-3-1-0'},defaultVariants:{state:'rest'}},defaultVariants:{},compoundVariants:[]});\nexport var itemContainer = '_14rlfn30-3-1-0';\nexport var listContainer = '_14rlfn3l-3-1-0';\nexport var mediaQuery = '_14rlfn3d-3-1-0';\nexport var recentHeading = '_14rlfn3m-3-1-0';\nexport var recentIcon = '_14rlfn3n-3-1-0';\nexport var timeframeDisplayValue = '_14rlfn37-3-1-0';\nexport var wrapper = _7a468({defaultClassName:'_14rlfn38-3-1-0',variantClassNames:{isSelected:{true:'_14rlfn39-3-1-0',false:'_14rlfn3a-3-1-0'},isDisabled:{true:'_14rlfn3b-3-1-0',false:'_14rlfn3c-3-1-0'}},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

@@ -0,0 +1,64 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { useIntl } from "react-intl";
+import { PresetItem } from "./PresetItem.js";
+import * as styles from "./Presets.sty.js";
+import { Divider } from "../../../../layouts/divider/Divider.js";
+import { Text } from "../../../../typography/text/Text.js";
+import { TIMEFRAME_SELECTOR_MESSAGES } from "../../constants/timeframeSelectorMessages.js";
+import { PresetItemContext } from "../../contexts/PresetItemContext.js";
+import { getTimeframePresets } from "../../utils/presets-helpers.js";
+import {
+  timeframeQueryClient,
+  TIMEFRAME_PRESETS_QUERY_KEY
+} from "../../utils/TimeframePresetsClient.js";
+const RecentTimeframes = () => {
+  const intl = useIntl();
+  const { data, isLoading } = useQuery(
+    {
+      queryKey: TIMEFRAME_PRESETS_QUERY_KEY,
+      queryFn: getTimeframePresets,
+      notifyOnChangeProps: ["dataUpdatedAt"]
+    },
+    timeframeQueryClient
+  );
+  const presetItemContextValue = useMemo(
+    () => ({ isRecent: true }),
+    []
+  );
+  if (!data?.recentPresets?.length || isLoading) {
+    return null;
+  }
+  const ariaLabel = intl.formatMessage(
+    TIMEFRAME_SELECTOR_MESSAGES.recentTimeframesList
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Divider, { flexItem: false }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Text, { textStyle: "small", className: styles.recentHeading, as: "div", children: intl.formatMessage(
+        TIMEFRAME_SELECTOR_MESSAGES.recentTimeframesHeading
+      ) }),
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          role: "listbox",
+          className: styles.listContainer,
+          "aria-label": ariaLabel,
+          children: /* @__PURE__ */ jsx(PresetItemContext.Provider, { value: presetItemContextValue, children: data.recentPresets.map(({ timeframe }) => /* @__PURE__ */ jsx(
+            PresetItem,
+            {
+              value: timeframe
+            },
+            `${timeframe.from} \u2192 ${timeframe.to}`
+          )) })
+        }
+      )
+    ] })
+  ] });
+};
+RecentTimeframes.displayName = "RecentTimeframes";
+export {
+  RecentTimeframes
+};
+//# sourceMappingURL=RecentTimeframes.js.map

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

@@ -0,0 +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              />\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;AAAA,YADF,GAAG,UAAU,IAAI,WAAM,UAAU,EAAE;AAAA,UAE1C,CACD,GACH;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;AAGE,iBACA,cAAc;",
+  "names": []
+}

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

@@ -5,17 +5,20 @@ import {
   ChevronLeftSmallIcon,
   ChevronRightSmallIcon
 } from "@dynatrace/strato-icons";
-import { useInternalTimeframeSelectorContext } from "./hooks/useInternalTimeframeSelectorContext.js";
 import { StepperButtonTooltip } from "./StepperButtonTooltip.js";
-import { formatStepperValues, getTimeShift } from "./utils/stepper-helpers.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 {
+  formatStepperValues,
+  getTimeShift
+} from "../../utils/stepper-helpers.js";
 import {
   dateIsMinMax,
   isBiggerThan,
   isSmallerThan
-} from "./utils/timeframe-selection.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";
+} from "../../utils/timeframe-selection.js";
 function isStepperDisabled(direction, value, min, max) {
   if (direction === "backward") {
     const nextStepIsValid = isSmallerThan(value.from.absoluteDate, min) || dateIsMinMax(value.from, min);

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

@@ -0,0 +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 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      >\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/{StepperButtonTooltip.js → components/stepper/StepperButtonTooltip.js}

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useTooltipMessages } from "./hooks/useTooltipMessages.js";
-import { Flex } from "../../layouts/flex/Flex.js";
-import { Tooltip } from "../../overlays/tooltip/Tooltip.js";
-import { Text } from "../../typography/text/Text.js";
+import { Flex } from "../../../../layouts/flex/Flex.js";
+import { Tooltip } from "../../../../overlays/tooltip/Tooltip.js";
+import { Text } from "../../../../typography/text/Text.js";
+import { useTooltipMessages } from "../../hooks/useTooltipMessages.js";
 const StepperButtonTooltip = (props) => {
   const {
     value,

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -3,10 +3,10 @@ import {
   cloneElement
 } from "react";
 import { isElement } from "react-is";
-import { useTimeframeSelectorContext } from "./hooks/useTimeframeSelectorContext.js";
-import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
-import { useFormFieldMessagesContext } from "../../forms/forms-core/hooks/useFormFieldMessagesContext.js";
-function _isTimeframeSelectorCustomTriggerElement(child) {
+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) => {
@@ -18,7 +18,7 @@ const CustomTrigger = (props) => {
   const dtComponentName = triggerProps?.["data-dt-component"];
   if (isValidElement(children)) {
     return cloneElement(children, {
-      ..._mergeProps(triggerProps, remainingProps, children.props, {
+      ...mergeProps(triggerProps, remainingProps, children.props, {
         "data-dt-component": dtComponentName
       })
     });
@@ -26,7 +26,7 @@ const CustomTrigger = (props) => {
   if (typeof children === "function") {
     return children(
       { displayValue, isInvalid: !isValid, hint },
-      _mergeProps(triggerProps, remainingProps)
+      mergeProps(triggerProps, remainingProps)
     );
   }
   return null;
@@ -34,6 +34,6 @@ const CustomTrigger = (props) => {
 CustomTrigger["displayName"] = "TimeframeSelector.CustomTrigger";
 export {
   CustomTrigger,
-  _isTimeframeSelectorCustomTriggerElement
+  isTimeframeSelectorCustomTriggerElement
 };
 //# sourceMappingURL=CustomTrigger.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

package/esm/filters/timeframe-selector/{DisplayValue.js → components/trigger/DisplayValue.js}

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { isElement } from "react-is";
-import { useTimeframeSelectorContext } from "./hooks/useTimeframeSelectorContext.js";
-import { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from "../../core/utils/can-receive-default-text-format.js";
-import { Text } from "../../typography/text/Text.js";
-function _isTimeframeSelectorDisplayValueElement(child) {
+import { canReceiveDefaultTextFormat } from "../../../../core/utils/can-receive-default-text-format.js";
+import { Text } from "../../../../typography/text/Text.js";
+import { useTimeframeSelectorContext } from "../../hooks/useTimeframeSelectorContext.js";
+function isTimeframeSelectorDisplayValueElement(child) {
   return isElement(child) && child.type === DisplayValue;
 }
 const DisplayValue = (props) => {
@@ -15,7 +15,7 @@ const DisplayValue = (props) => {
   if (typeof children === "function") {
     return children({ displayValue });
   }
-  if (_canReceiveDefaultTextFormat(children)) {
+  if (canReceiveDefaultTextFormat(children)) {
     return /* @__PURE__ */ jsx(Text, { as: "p", children });
   }
   if (isElement(children)) {
@@ -26,6 +26,6 @@ const DisplayValue = (props) => {
 DisplayValue.displayName = "TimeframeSelector.DisplayValue";
 export {
   DisplayValue,
-  _isTimeframeSelectorDisplayValueElement
+  isTimeframeSelectorDisplayValueElement
 };
 //# sourceMappingURL=DisplayValue.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/filters/timeframe-selector/components/trigger/DisplayValue.tsx"],
+  "sourcesContent": ["import type { ReactElement, ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport { canReceiveDefaultTextFormat } from '../../../../core/utils/can-receive-default-text-format.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\n\n/**\n * @public\n */\nexport type TimeframeSelectorDisplayValueProps = {\n  children?:\n    | ReactNode\n    | ((customTriggerProps: { displayValue: ReactNode }) => ReactElement);\n};\n\n/**\n * Typeguard function that will check if a Node is a TimeframeSelector.DisplayValue\n * @internal\n */\nexport function isTimeframeSelectorDisplayValueElement(\n  child: ReactNode,\n): child is ReactElement<TimeframeSelectorDisplayValueProps> {\n  return isElement(child) && child.type === DisplayValue;\n}\n\n/**\n * `TimeframeSelector.DisplayValue` defines a custom display value within the Trigger. A TimeframeSelector.DisplayValue component\n * is only valid within a TimeframeSelector.Trigger.\n * @public\n */\nexport const DisplayValue = (props: TimeframeSelectorDisplayValueProps) => {\n  const { children } = props;\n\n  const { displayValue } = useTimeframeSelectorContext();\n\n  if (!children) {\n    return null;\n  }\n\n  if (typeof children === 'function') {\n    return children({ displayValue });\n  }\n\n  if (canReceiveDefaultTextFormat(children)) {\n    return <Text as=\"p\">{children}</Text>;\n  }\n\n  if (isElement(children)) {\n    return children;\n  }\n\n  return null;\n};\n\nDisplayValue.displayName = 'TimeframeSelector.DisplayValue';\n"],
+  "mappings": "AA6CW;AA5CX,SAAS,iBAAiB;AAE1B,SAAS,mCAAmC;AAC5C,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAerC,SAAS,uCACd,OAC2D;AAC3D,SAAO,UAAU,KAAK,KAAK,MAAM,SAAS;AAC5C;AAOO,MAAM,eAAe,CAAC,UAA8C;AACzE,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM,EAAE,aAAa,IAAI,4BAA4B;AAErD,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,aAAa,YAAY;AAClC,WAAO,SAAS,EAAE,aAAa,CAAC;AAAA,EAClC;AAEA,MAAI,4BAA4B,QAAQ,GAAG;AACzC,WAAO,oBAAC,QAAK,IAAG,KAAK,UAAS;AAAA,EAChC;AAEA,MAAI,UAAU,QAAQ,GAAG;AACvB,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,aAAa,cAAc;",
+  "names": []
+}

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

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

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

@@ -6,23 +6,19 @@ import {
 import { useMemo } from "react";
 import { isElement } from "react-is";
 import { ChevronDownSmallIcon } from "@dynatrace/strato-icons";
-import { _isTimeframeSelectorDisplayValueElement } from "./DisplayValue.js";
-import { useInternalTimeframeSelectorContext } from "./hooks/useInternalTimeframeSelectorContext.js";
-import { useTimeframeSelectorContext } from "./hooks/useTimeframeSelectorContext.js";
-import {
-  timeframeSelectorSuffixCSS,
-  timeframeSelectorSuffixOpenCSS,
-  timeframeSelectorTriggerReadOnlyCSS
-} from "./TimeframeSelector.sty.js";
-import { Button } from "../../buttons/button/Button.js";
-import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
-function _isTimeframeSelectorTriggerElement(child) {
+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;
 }
 function getDisplayValueSlot(children) {
   let displayValue = null;
   Children.forEach(children, (child) => {
-    if (_isTimeframeSelectorDisplayValueElement(child)) {
+    if (isTimeframeSelectorDisplayValueElement(child)) {
       displayValue = displayValue || [];
       displayValue.push(child);
     }
@@ -58,17 +54,14 @@ const Trigger = (props) => {
       variant: "emphasized",
       color: showError ? "critical" : "neutral",
       style: consumerStyle,
-      className: clsx(
-        consumerClassName,
-        readOnly && timeframeSelectorTriggerReadOnlyCSS
-      ),
+      className: clsx(consumerClassName, readOnly && styles.readOnly),
       children: [
         /* @__PURE__ */ jsx(Button.Suffix, { children: /* @__PURE__ */ jsx(
           ChevronDownSmallIcon,
           {
             className: clsx(
-              timeframeSelectorSuffixCSS,
-              triggerProps?.["aria-expanded"] && timeframeSelectorSuffixOpenCSS
+              styles.suffix,
+              triggerProps?.["aria-expanded"] && styles.suffixOpen
             )
           }
         ) }),
@@ -80,6 +73,6 @@ const Trigger = (props) => {
 Trigger.displayName = "TimeframeSelector.Trigger";
 export {
   Trigger,
-  _isTimeframeSelectorTriggerElement
+  isTimeframeSelectorTriggerElement
 };
 //# sourceMappingURL=Trigger.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -0,0 +1,10 @@
+import "./Trigger.css";
+var readOnly = "_attccb0-3-1-0";
+var suffix = "_attccb1-3-1-0";
+var suffixOpen = "_attccb2-3-1-0";
+export {
+  readOnly,
+  suffix,
+  suffixOpen
+};
+//# sourceMappingURL=Trigger.sty.js.map

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

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

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

@@ -0,0 +1,41 @@
+const TIMEFRAME_SELECTOR_PRESETS = [
+  {
+    // Last 30 minutes
+    from: "now()-30m",
+    to: "now()"
+  },
+  {
+    // Last 1 hour
+    from: "now()-1h",
+    to: "now()"
+  },
+  {
+    // Last 2 hours
+    from: "now()-2h",
+    to: "now()"
+  },
+  {
+    // Today
+    from: "@d",
+    to: "now()"
+  },
+  {
+    // Yesterday
+    from: "-1d@d",
+    to: "@d"
+  },
+  {
+    // Last 24 hours
+    from: "now()-24h",
+    to: "now()"
+  },
+  {
+    // Last 7 days
+    from: "now()-7d",
+    to: "now()"
+  }
+];
+export {
+  TIMEFRAME_SELECTOR_PRESETS
+};
+//# sourceMappingURL=timeframe-presets.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/filters/timeframe-selector/constants/timeframe-presets.ts"],
+  "sourcesContent": ["import type { TimeframeSelectorPresetItemProps } from '../components/presets/PresetItem.js';\n\n/**\n * @public\n */\nexport const TIMEFRAME_SELECTOR_PRESETS: Array<\n  TimeframeSelectorPresetItemProps['value']\n> = [\n  {\n    // Last 30 minutes\n    from: 'now()-30m',\n    to: 'now()',\n  },\n  {\n    // Last 1 hour\n    from: 'now()-1h',\n    to: 'now()',\n  },\n  {\n    // Last 2 hours\n    from: 'now()-2h',\n    to: 'now()',\n  },\n  {\n    // Today\n    from: '@d',\n    to: 'now()',\n  },\n  {\n    // Yesterday\n    from: '-1d@d',\n    to: '@d',\n  },\n  {\n    // Last 24 hours\n    from: 'now()-24h',\n    to: 'now()',\n  },\n  {\n    // Last 7 days\n    from: 'now()-7d',\n    to: 'now()',\n  },\n];\n"],
+  "mappings": "AAKO,MAAM,6BAET;AAAA,EACF;AAAA;AAAA,IAEE,MAAM;AAAA,IACN,IAAI;AAAA,EACN;AAAA,EACA;AAAA;AAAA,IAEE,MAAM;AAAA,IACN,IAAI;AAAA,EACN;AAAA,EACA;AAAA;AAAA,IAEE,MAAM;AAAA,IACN,IAAI;AAAA,EACN;AAAA,EACA;AAAA;AAAA,IAEE,MAAM;AAAA,IACN,IAAI;AAAA,EACN;AAAA,EACA;AAAA;AAAA,IAEE,MAAM;AAAA,IACN,IAAI;AAAA,EACN;AAAA,EACA;AAAA;AAAA,IAEE,MAAM;AAAA,IACN,IAAI;AAAA,EACN;AAAA,EACA;AAAA;AAAA,IAEE,MAAM;AAAA,IACN,IAAI;AAAA,EACN;AACF;",
+  "names": []
+}

package/esm/filters/timeframe-selector/{utils → constants}/timeframeSelectorMessages.js

@@ -79,6 +79,46 @@ const TIMEFRAME_SELECTOR_MESSAGES = defineMessages({
     defaultMessage: "Learn more",
     id: "q9YfvvFrRo1n8wvN",
     description: "Display text for the link to the timeframe selector documentation."
+  },
+  resetTimeframeButton: {
+    defaultMessage: "Reset timeframe",
+    id: "EG+qZn4zIajJ41CP",
+    description: "Shown for the reset timeframe button of the timeframe selector."
+  },
+  timeframePresets: {
+    defaultMessage: "List of timeframe presets",
+    id: "1cycyeSJyv4MEQyz",
+    description: "Aria label for the list of timeframe presets."
+  },
+  recentTimeframesHeading: {
+    defaultMessage: "Recently used",
+    id: "8kqNkvIZtJIon5xR",
+    description: "Heading for the recently used timeframes."
+  },
+  recentTimeframesList: {
+    defaultMessage: "List of recently used timeframes",
+    id: "BDzwWccOiezgFJp3",
+    description: "Aria label for the list of recently used timeframes."
+  },
+  disabledTooltip: {
+    defaultMessage: "The timeframe exceeds the limits supported in this app.",
+    id: "KzBG7IQ4sG79Dlpy",
+    description: "Tooltip message for a disabled timeframe."
+  },
+  overlayContainer: {
+    defaultMessage: "Timeframe selector overlay for providing a custom timeframe or selecting one of the presets",
+    id: "hnsZ5MLEj9V3vVxP",
+    description: "Aria label for the overlay of the timeframe selector."
+  },
+  applyButton: {
+    defaultMessage: "Apply",
+    id: "Np6+N27mrjvIJEls",
+    description: "Shown for the apply button of the timeframe selector."
+  },
+  timeframeLabel: {
+    defaultMessage: "Timeframe",
+    id: "EKDlkAM4+D7rcALf",
+    description: "Timeframe label shown in the TimeframeSelector overlay."
   }
 });
 export {