@dynatrace/strato-components 3.0.1 → 3.1.1

package/filters/timeframe-selector/components/presets/PresetItem.d.ts

@@ -0,0 +1,29 @@
+import { type HTMLAttributes } from 'react';
+import type { DataTestId } from '../../../../core/types/data-props.js';
+import type { StylingProps } from '../../../../core/types/styling-props.js';
+import type { WithChildren } from '../../../../core/types/with-children.js';
+/**
+ * @public
+ */
+export interface TimeframeSelectorPresetItemProps extends HTMLAttributes<HTMLLIElement>, DataTestId, StylingProps, WithChildren {
+    /** The value of the timeframe preset. */
+    value: {
+        /** Start of the time frame. */
+        from: string;
+        /** End of the time frame. */
+        to: string;
+    };
+}
+/**
+ * TimeframeSelector preset item shown inside the presets list of the overlay.
+ * @public
+ */
+export declare const PresetItem: {
+    (props: TimeframeSelectorPresetItemProps & {
+        /**
+         * @deprecated - Prop will be removed with the next breaking change cycle.
+         */
+        _isSelected?: boolean;
+    }): import("react/jsx-runtime.js").JSX.Element | null;
+    displayName: string;
+};

package/filters/timeframe-selector/{Item.js → components/presets/PresetItem.js}

@@ -26,43 +26,50 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Item_exports = {};
-__export(Item_exports, {
+var PresetItem_exports = {};
+__export(PresetItem_exports, {
   PresetItem: () => PresetItem
 });
-module.exports = __toCommonJS(Item_exports);
+module.exports = __toCommonJS(PresetItem_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
-var import_useInternalTimeframeSelectorContext = require("./hooks/useInternalTimeframeSelectorContext.js");
-var import_useTimeframeSelectorContext = require("./hooks/useTimeframeSelectorContext.js");
-var import_useTooltipMessages = require("./hooks/useTooltipMessages.js");
-var import_TimeframeSelectorPresets_css = require("./TimeframeSelectorPresets.sty.js");
-var import_timeframe_selection = require("./utils/timeframe-selection.js");
-var import_useId = require("../../core/hooks/useId.js");
-var import_useFocusRing = require("../../core/styles/useFocusRing.js");
-var import_merge_props = require("../../core/utils/merge-props.js");
-var import_SelectedOverCalendarContext = require("../../forms/date-time-range-picker/contexts/SelectedOverCalendarContext.js");
-var import_helpers = require("../../forms/date-time-range-picker/helpers.js");
-var import_timeParser = require("../../forms/forms-core/time/timeParser.js");
-var import_Flex = require("../../layouts/flex/Flex.js");
-var import_Grid = require("../../layouts/grid/Grid.js");
-var import_Tooltip = require("../../overlays/tooltip/Tooltip.js");
-var import_Text = require("../../typography/text/Text.js");
+var import_react_intl = require("react-intl");
+var import_strato_icons = require("@dynatrace/strato-icons");
+var styles = __toESM(require("./Presets.sty.js"));
+var import_useId = require("../../../../core/hooks/useId.js");
+var import_useFocusRing = require("../../../../core/styles/useFocusRing.js");
+var import_merge_props = require("../../../../core/utils/merge-props.js");
+var import_SelectedOverCalendarContext = require("../../../../forms/date-time-range-picker/contexts/SelectedOverCalendarContext.js");
+var import_helpers = require("../../../../forms/date-time-range-picker/helpers.js");
+var import_timeParser = require("../../../../forms/forms-core/time/timeParser.js");
+var import_Flex = require("../../../../layouts/flex/Flex.js");
+var import_Grid = require("../../../../layouts/grid/Grid.js");
+var import_Tooltip = require("../../../../overlays/tooltip/Tooltip.js");
+var import_Text = require("../../../../typography/text/Text.js");
+var import_timeframeSelectorMessages = require("../../constants/timeframeSelectorMessages.js");
+var import_useInternalTimeframeSelectorContext = require("../../hooks/useInternalTimeframeSelectorContext.js");
+var import_usePresetItemContext = require("../../hooks/usePresetItemContext.js");
+var import_useTimeframeSelectorContext = require("../../hooks/useTimeframeSelectorContext.js");
+var import_useTooltipMessages = require("../../hooks/useTooltipMessages.js");
+var import_presets_helpers = require("../../utils/presets-helpers.js");
+var import_timeframe_selection = require("../../utils/timeframe-selection.js");
 const PresetItem = (props) => {
   const {
     children,
     value,
-    _isSelected: isSelected = false,
     className: consumerClassName,
     style: consumerStyle,
     "data-testid": dataTestId,
     ...remainingProps
   } = props;
+  const intl = (0, import_react_intl.useIntl)();
   const [openTooltip, setOpenTooltip] = (0, import_react.useState)(false);
-  const { onChange } = (0, import_useTimeframeSelectorContext.useTimeframeSelectorContext)();
+  const { onChange, details } = (0, import_useTimeframeSelectorContext.useTimeframeSelectorContext)();
   const { min, max, precision } = (0, import_useInternalTimeframeSelectorContext.useInternalTimeframeSelectorContext)();
-  const isDisabled = (0, import_timeframe_selection._isOutsideRange)(value, min, max);
+  const { isRecent } = (0, import_usePresetItemContext.usePresetItemContext)();
+  const isSelected = (0, import_presets_helpers.isPresetSelected)(value, details, precision, isRecent);
+  const isDisabled = (0, import_timeframe_selection.isOutsideRange)(value, min, max);
   const tooltipId = (0, import_useId.useId)();
   const tooltipFocusProps = {
     onFocus: (0, import_react.useCallback)(
@@ -95,10 +102,12 @@ const PresetItem = (props) => {
     const { from, to } = (0, import_timeParser.parseValue)(value);
     if (from && to) {
       setSelectedOverCalendar?.(false);
-      onChange({
+      const timeframe = {
         from: (0, import_helpers.removePrecisionFromTimeValue)(from, precision) ?? from,
         to: (0, import_helpers.removePrecisionFromTimeValue)(to, precision) ?? to
-      });
+      };
+      onChange(timeframe);
+      (0, import_presets_helpers.saveRecentTimeframe)(timeframe);
     }
   }, [isDisabled, value, setSelectedOverCalendar, onChange, precision]);
   const handleItemKeyDown = (0, import_react.useCallback)(
@@ -115,12 +124,22 @@ const PresetItem = (props) => {
   const liRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     if (isSelected) {
-      liRef.current?.scrollIntoView();
+      liRef.current?.scrollIntoView({ block: "nearest" });
     }
   }, []);
   if (isInvalid) {
     return null;
   }
+  const tooltipContent = isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "small", children: intl.formatMessage(import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES.disabledTooltip) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { gap: 0, flexDirection: "column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "base-emphasized", children: timeframeDisplayValue }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "small", children: formattedPresetItemValue })
+    ] }),
+    !isAbsoluteTimeframe && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { gap: 0, flexDirection: "column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "small", children: tooltipFormattedTimeValueStart }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "small", children: tooltipFormattedTimeValueEnd })
+    ] })
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "li",
     {
@@ -130,7 +149,7 @@ const PresetItem = (props) => {
       "aria-disabled": isDisabled,
       className: (0, import_clsx.default)([
         focusClassName,
-        (0, import_TimeframeSelectorPresets_css.timeframeSelectorPresetItemCSS)({
+        styles.item({
           state
         }),
         consumerClassName
@@ -144,16 +163,7 @@ const PresetItem = (props) => {
         import_Tooltip.Tooltip,
         {
           id: tooltipId,
-          text: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { flexDirection: "column", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { gap: 0, flexDirection: "column", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "base-emphasized", children: timeframeDisplayValue }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "small", children: formattedPresetItemValue })
-            ] }),
-            !isAbsoluteTimeframe && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { gap: 0, flexDirection: "column", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "small", children: tooltipFormattedTimeValueStart }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "small", children: tooltipFormattedTimeValueEnd })
-            ] })
-          ] }),
+          text: tooltipContent,
           placement: "right",
           fallbackPlacements: [
             "right-end",
@@ -166,30 +176,32 @@ const PresetItem = (props) => {
           ],
           open: openTooltip,
           onOpenChange: setOpenTooltip,
-          disabled: isDisabled,
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "div",
             {
-              className: (0, import_TimeframeSelectorPresets_css.tooltipPresetItemWrapper)({ isSelected, isDisabled }),
+              className: styles.wrapper({ isSelected, isDisabled }),
               "aria-describedby": tooltipId,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Grid.Grid, { className: import_TimeframeSelectorPresets_css.timeframeSelectorPresetItemContainerCSS, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_Text.Text,
-                  {
-                    as: import_Flex.Flex,
-                    className: import_TimeframeSelectorPresets_css.timeframeSelectorPresetItemNameCSS,
-                    textStyle: "base-emphasized",
-                    children: timeframeDisplayValue
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Grid.Grid, { className: styles.itemContainer, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { alignItems: "center", className: styles.displayValueWrapper, children: [
+                  isRecent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.HistoryIcon, { className: styles.recentIcon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_Text.Text,
+                    {
+                      textStyle: "base-emphasized",
+                      as: "div",
+                      className: styles.timeframeDisplayValue,
+                      children: timeframeDisplayValue
+                    }
+                  )
+                ] }),
+                (!isRecent || !isAbsoluteTimeframe) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   import_Text.Text,
                   {
                     as: import_Flex.Flex,
                     textStyle: "small",
                     className: (0, import_clsx.default)(
-                      import_TimeframeSelectorPresets_css.timeframeSelectorPresetItemMediaQuery,
-                      (0, import_TimeframeSelectorPresets_css.timeframeSelectorPresetItemValueCSS)({
+                      styles.mediaQuery,
+                      styles.formattedPresetValue({
                         state
                       })
                     ),

package/{esm/filters/timeframe-selector/TimeframeSelectorPresets.css → filters/timeframe-selector/components/presets/Presets.css}

@@ -1,11 +1,11 @@
-._1href790-3-0-1 {
+._14rlfn30-3-1-1 {
   justify-content: space-between;
   align-items: center;
   grid: auto / auto-flow;
-  grid-template-columns: auto fit-content(262px);
+  grid-template-columns: auto 1fr;
   max-height: var(--dt-spacings-size-20, 20px);
 }
-._1href791-3-0-1 {
+._14rlfn31-3-1-1 {
   position: relative;
   list-style: none;
   cursor: pointer;
@@ -16,42 +16,45 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   outline-offset: calc(var(--dt-spacings-size-2, 2px) * -1);
 }
-._1href792-3-0-1 {
+._14rlfn32-3-1-1 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1href792-3-0-1:hover {
+._14rlfn32-3-1-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1href792-3-0-1:active {
+._14rlfn32-3-1-1:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1href793-3-0-1 {
+._14rlfn33-3-1-1 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._1href793-3-0-1:hover {
+._14rlfn33-3-1-1:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._1href793-3-0-1:active {
+._14rlfn33-3-1-1:active {
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._1href794-3-0-1 {
+._14rlfn34-3-1-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._1href796-3-0-1 {
+._14rlfn36-3-1-1 {
+  min-width: 0;
+}
+._14rlfn37-3-1-1 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
 }
-._1href797-3-0-1 {
+._14rlfn38-3-1-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);
 }
-._1href798-3-0-1::before {
+._14rlfn39-3-1-1::before {
   content: "";
   position: absolute;
   width: 2px;
@@ -59,52 +62,62 @@
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._1href799-3-0-1::before {
+._14rlfn3a-3-1-1::before {
   content: "";
 }
-._1href79a-3-0-1::before {
+._14rlfn3b-3-1-1::before {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._1href79b-3-0-1::before {
+._14rlfn3c-3-1-1::before {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._1href79d-3-0-1 {
+._14rlfn3e-3-1-1 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
+  text-align: right;
 }
-._1href79e-3-0-1 {
+._14rlfn3f-3-1-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1href79f-3-0-1 {
+._14rlfn3g-3-1-1 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._1href79g-3-0-1 {
+._14rlfn3h-3-1-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1href79h-3-0-1 {
+._14rlfn3i-3-1-1 {
   position: absolute;
   width: 2px;
   height: 20px;
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._1href79i-3-0-1 {
+._14rlfn3j-3-1-1 {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._1href79j-3-0-1 {
+._14rlfn3k-3-1-1 {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._1href79k-3-0-1 {
+._14rlfn3l-3-1-1 {
   position: relative;
-  max-height: 320px;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
+._14rlfn3m-3-1-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-1-1 {
+  flex-shrink: 0;
+}
 @media screen and (max-width: 470px) {
-  ._1href79c-3-0-1 {
+  ._14rlfn3d-3-1-1 {
     display: none;
   }
 }

package/filters/timeframe-selector/components/presets/Presets.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import { AriaLabelingProps } from '../../../../core/types/a11y-props.js';
+import { DataTestId } from '../../../../core/types/data-props.js';
+import { DOMProps } from '../../../../core/types/dom.js';
+import { StylingProps } from '../../../../core/types/styling-props.js';
+/**
+ * @public
+ */
+export interface TimeframeSelectorPresetsProps extends DOMProps, DataTestId, StylingProps, AriaLabelingProps {
+    /** Children shown inside the presets list. A default list of presets is shown if no children are set. */
+    children?: ReactNode;
+}
+/**
+ * A list of preset items shown in the overlay.
+ * @public
+ */
+export declare const Presets: {
+    (props: TimeframeSelectorPresetsProps): import("react/jsx-runtime.js").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,85 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Presets_exports = {};
+__export(Presets_exports, {
+  Presets: () => Presets
+});
+module.exports = __toCommonJS(Presets_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_react = require("react");
+var import_react_intl = require("react-intl");
+var import_PresetItem = require("./PresetItem.js");
+var styles = __toESM(require("./Presets.sty.js"));
+var import_is_slot = require("../../../../core/utils/is-slot.js");
+var import_logging = require("../../../../core/utils/logging.js");
+var import_timeframe_presets = require("../../constants/timeframe-presets.js");
+var import_timeframeSelectorMessages = require("../../constants/timeframeSelectorMessages.js");
+function getItemSlots(children) {
+  if (!children) {
+    return null;
+  }
+  const validChildren = [];
+  for (const child of import_react.Children.toArray(children)) {
+    if ((0, import_is_slot.isSlot)(child, import_PresetItem.PresetItem)) {
+      validChildren.push(child);
+    } else {
+      (0, import_logging.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 = (0, import_react_intl.useIntl)();
+  const presetsListLabel = ariaLabel ?? intl.formatMessage(import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES.timeframePresets);
+  const validChildren = getItemSlots(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "ul",
+    {
+      role: "listbox",
+      "aria-label": presetsListLabel,
+      className: (0, import_clsx.default)([styles.listContainer, consumerClassName]),
+      style: consumerStyle,
+      "data-testid": dataTestId,
+      ...remainingProps,
+      children: validChildren ?? import_timeframe_presets.TIMEFRAME_SELECTOR_PRESETS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PresetItem.PresetItem, { value: item }, `${item.from} \u2192 ${item.to}`))
+    }
+  );
+};
+Presets["displayName"] = "TimeframeSelector.Presets";

package/filters/timeframe-selector/{TimeframeSelectorPresets.sty.d.ts → components/presets/Presets.sty.d.ts}

@@ -1,7 +1,7 @@
 import { type RecipeVariants } from '@vanilla-extract/recipes';
-export type PresetItemVariants = RecipeVariants<typeof timeframeSelectorPresetItemCSS>;
-export declare const timeframeSelectorPresetItemContainerCSS: string;
-export declare const timeframeSelectorPresetItemCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+export type PresetItemVariants = RecipeVariants<typeof item>;
+export declare const itemContainer: string;
+export declare const item: import("@vanilla-extract/recipes").RuntimeFn<{
     state: {
         rest: {
             backgroundColor: string;
@@ -31,8 +31,9 @@ export declare const timeframeSelectorPresetItemCSS: import("@vanilla-extract/re
         state: string;
     };
 }>;
-export declare const timeframeSelectorPresetItemNameCSS: string;
-export declare const tooltipPresetItemWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const displayValueWrapper: string;
+export declare const timeframeDisplayValue: string;
+export declare const wrapper: import("@vanilla-extract/recipes").RuntimeFn<{
     isSelected: {
         true: {
             '::before': {
@@ -63,8 +64,8 @@ export declare const tooltipPresetItemWrapper: import("@vanilla-extract/recipes"
         };
     };
 }>;
-export declare const timeframeSelectorPresetItemMediaQuery: string;
-export declare const timeframeSelectorPresetItemValueCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const mediaQuery: string;
+export declare const formattedPresetValue: import("@vanilla-extract/recipes").RuntimeFn<{
     state: {
         rest: {
             color: string;
@@ -77,7 +78,7 @@ export declare const timeframeSelectorPresetItemValueCSS: import("@vanilla-extra
         };
     };
 }>;
-export declare const timeframeSelectorPresetSelectedIndicatorIcon: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const indicatorIcon: import("@vanilla-extract/recipes").RuntimeFn<{
     isDisabled: {
         true: {
             backgroundColor: string;
@@ -87,4 +88,6 @@ export declare const timeframeSelectorPresetSelectedIndicatorIcon: import("@vani
         };
     };
 }>;
-export declare const timeframeSelectorPresetsCSS: string;
+export declare const listContainer: string;
+export declare const recentHeading: string;
+export declare const recentIcon: string;

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

@@ -0,0 +1,46 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Presets_css_exports = {};
+__export(Presets_css_exports, {
+  displayValueWrapper: () => displayValueWrapper,
+  formattedPresetValue: () => formattedPresetValue,
+  indicatorIcon: () => indicatorIcon,
+  item: () => item,
+  itemContainer: () => itemContainer,
+  listContainer: () => listContainer,
+  mediaQuery: () => mediaQuery,
+  recentHeading: () => recentHeading,
+  recentIcon: () => recentIcon,
+  timeframeDisplayValue: () => timeframeDisplayValue,
+  wrapper: () => wrapper
+});
+module.exports = __toCommonJS(Presets_css_exports);
+var import_Presets_css_ts_vanilla = require("./Presets.css");
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var displayValueWrapper = "_14rlfn36-3-1-1";
+var formattedPresetValue = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3e-3-1-1", variantClassNames: { state: { rest: "_14rlfn3f-3-1-1", selected: "_14rlfn3g-3-1-1", disabled: "_14rlfn3h-3-1-1" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
+var indicatorIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3i-3-1-1", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-1-1", false: "_14rlfn3k-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn31-3-1-1", variantClassNames: { state: { rest: "_14rlfn32-3-1-1", selected: "_14rlfn33-3-1-1", disabled: "_14rlfn34-3-1-1" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
+var itemContainer = "_14rlfn30-3-1-1";
+var listContainer = "_14rlfn3l-3-1-1";
+var mediaQuery = "_14rlfn3d-3-1-1";
+var recentHeading = "_14rlfn3m-3-1-1";
+var recentIcon = "_14rlfn3n-3-1-1";
+var timeframeDisplayValue = "_14rlfn37-3-1-1";
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn38-3-1-1", variantClassNames: { isSelected: { true: "_14rlfn39-3-1-1", false: "_14rlfn3a-3-1-1" }, isDisabled: { true: "_14rlfn3b-3-1-1", false: "_14rlfn3c-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });

package/filters/timeframe-selector/components/presets/RecentTimeframes.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A list of recently selected timeframes shown in the overlay.
+ * @public
+ */
+export declare const RecentTimeframes: () => import("react/jsx-runtime.js").JSX.Element | null;