@dynatrace/strato-components 3.0.1 → 3.1.0

package/esm/filters/segment-selector/parts/segmentsPresets/SegmentsPresetsList.js

@@ -69,7 +69,7 @@ const SegmentsPresetList = ({
           [animationHelperStyles.isAnimating]: isAnimating
         }),
         children: [
-          showRecent && /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: 4, width: "100%", children: [
+          showRecent && /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: 0, width: "100%", children: [
             /* @__PURE__ */ jsx(
               Text,
               {
@@ -85,10 +85,10 @@ const SegmentsPresetList = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx("ul", { className: styles.list, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxs(ShowMorePanel, { children: [
+            /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxs(ShowMorePanel, { children: [
               /* @__PURE__ */ jsx(ShowMorePanel.PrimaryContent, { children: primaryContent }),
               extendedContent && /* @__PURE__ */ jsx(ShowMorePanel.ExtendedContent, { children: extendedContent })
-            ] }) }, "recent-presets") })
+            ] }) }, "recent-presets")
           ] }),
           /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: showPinned && /* @__PURE__ */ jsxs(
             Flex,

package/esm/filters/segment-selector/parts/segmentsPresets/SegmentsPresetsList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/segmentsPresets/SegmentsPresetsList.tsx"],
-  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useState } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport { getAppName } from '@dynatrace-sdk/app-environment';\nimport { getSegmentsPresets } from '@dynatrace-sdk/segments-presets';\n\nimport { isSelectedPreset } from './isSelectedPreset.js';\nimport {\n  expandAndCollapseAnimationVariants,\n  SegmentsPreset,\n} from './SegmentsPreset.js';\nimport * as styles from './SegmentsPresets.sty.js';\nimport { Divider } from '../../../../layouts/divider/Divider.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { segmentsClient } from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport { useSegments } from '../../hooks/useSegments.js';\nimport * as animationHelperStyles from '../Overlay.sty.js';\nimport { ShowMorePanel } from '../ShowMorePanel/ShowMorePanel.js';\n\nconst PIN_LIMIT = 10;\n\nexport const SegmentsPresetList = ({\n  showDivider,\n}: {\n  showDivider: boolean;\n}) => {\n  const { segments } = useSegments();\n  const { data, isLoading } = useQuery(\n    {\n      queryKey: ['getSegmentsPresets'],\n      queryFn: getSegmentsPresets,\n      notifyOnChangeProps: ['dataUpdatedAt'],\n    },\n    segmentsClient.queryClient,\n  );\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  if (\n    !data ||\n    (data.pinnedPresets.length === 0 && data.recentPresets.length === 0) ||\n    isLoading\n  ) {\n    return null;\n  }\n  const pinLimitReached = data.pinnedPresets.length >= PIN_LIMIT;\n\n  const recentPresets = data.recentPresets?.map((preset) => (\n    <li key={`recent-${preset.id}`} className={styles.listItem}>\n      <SegmentsPreset\n        uiPreset={preset}\n        id={preset.id}\n        pinLimitReached={pinLimitReached}\n        isPinned={data.pinnedPresets.some(\n          (pinnedPreset) => preset.id === pinnedPreset.id,\n        )}\n        isSelected={isSelectedPreset(segments, preset.segments)}\n      />\n    </li>\n  ));\n\n  const primaryContent =\n    recentPresets.length > 3 ? recentPresets.slice(0, 2) : recentPresets;\n  const extendedContent =\n    recentPresets.length > 3 ? recentPresets.slice(2) : null;\n\n  const showRecent = data.recentPresets.length > 0;\n  const showPinned = data.pinnedPresets.length > 0;\n\n  return (\n    <>\n      {showDivider && <Divider />}\n      <Flex\n        flexDirection=\"column\"\n        width=\"100%\"\n        px={0}\n        pb={4}\n        gap={0}\n        pt={showDivider ? 12 : 0}\n        className={clsx({\n          [animationHelperStyles.isAnimating]: isAnimating,\n        })}\n      >\n        {showRecent && (\n          <Flex flexDirection=\"column\" gap={4} width=\"100%\">\n            <Text\n              textStyle=\"small-emphasized\"\n              className={styles.sectionHeadline}\n            >\n              <FormattedMessage\n                id=\"QZdQoUnAWKJYAyK2\"\n                defaultMessage=\"Recently used\"\n                description=\"Headline to group recently used segments presets.\"\n              />\n            </Text>\n            <ul className={styles.list}>\n              {/** The AnimatePresence is needed here to prevent the initial animation of the recent presets. */}\n              <AnimatePresence initial={false} key=\"recent-presets\">\n                <ShowMorePanel>\n                  <ShowMorePanel.PrimaryContent>\n                    {primaryContent}\n                  </ShowMorePanel.PrimaryContent>\n                  {extendedContent && (\n                    <ShowMorePanel.ExtendedContent>\n                      {extendedContent}\n                    </ShowMorePanel.ExtendedContent>\n                  )}\n                </ShowMorePanel>\n              </AnimatePresence>\n            </ul>\n          </Flex>\n        )}\n        <AnimatePresence initial={false} key=\"pinned-presets\">\n          {showPinned && (\n            <Flex\n              as={motion.div}\n              flexDirection=\"column\"\n              gap={4}\n              variants={expandAndCollapseAnimationVariants}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              onAnimationStart={() => setIsAnimating(true)}\n              onAnimationComplete={() => setIsAnimating(false)}\n            >\n              {showRecent && showPinned && <Divider />}\n              <Text\n                key=\"pinned-header\"\n                textStyle=\"small-emphasized\"\n                className={styles.sectionHeadline}\n                style={{ paddingTop: Spacings.Size12 }}\n              >\n                <FormattedMessage\n                  key=\"pinned-header-text\"\n                  id=\"568KZGFcxrq95nEC\"\n                  defaultMessage=\"Pinned in {appName}\"\n                  description=\"Headline to group recently used segments presets.\"\n                  values={{ appName: getAppName() }}\n                />\n              </Text>\n              <ul className={styles.list}>\n                <AnimatePresence initial={false} key=\"pinned-presets-list\">\n                  {data.pinnedPresets.map((preset) => (\n                    <li key={`pinned-${preset.id}`} className={styles.listItem}>\n                      <SegmentsPreset\n                        uiPreset={preset}\n                        id={preset.id}\n                        pinLimitReached={pinLimitReached}\n                        isPinned={true}\n                        isSelected={isSelectedPreset(segments, preset.segments)}\n                      />\n                    </li>\n                  ))}\n                </AnimatePresence>\n              </ul>\n            </Flex>\n          )}\n        </AnimatePresence>\n      </Flex>\n    </>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useState } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport { getAppName } from '@dynatrace-sdk/app-environment';\nimport { getSegmentsPresets } from '@dynatrace-sdk/segments-presets';\n\nimport { isSelectedPreset } from './isSelectedPreset.js';\nimport {\n  expandAndCollapseAnimationVariants,\n  SegmentsPreset,\n} from './SegmentsPreset.js';\nimport * as styles from './SegmentsPresets.sty.js';\nimport { Divider } from '../../../../layouts/divider/Divider.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { segmentsClient } from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport { useSegments } from '../../hooks/useSegments.js';\nimport * as animationHelperStyles from '../Overlay.sty.js';\nimport { ShowMorePanel } from '../ShowMorePanel/ShowMorePanel.js';\n\nconst PIN_LIMIT = 10;\n\nexport const SegmentsPresetList = ({\n  showDivider,\n}: {\n  showDivider: boolean;\n}) => {\n  const { segments } = useSegments();\n  const { data, isLoading } = useQuery(\n    {\n      queryKey: ['getSegmentsPresets'],\n      queryFn: getSegmentsPresets,\n      notifyOnChangeProps: ['dataUpdatedAt'],\n    },\n    segmentsClient.queryClient,\n  );\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  if (\n    !data ||\n    (data.pinnedPresets.length === 0 && data.recentPresets.length === 0) ||\n    isLoading\n  ) {\n    return null;\n  }\n  const pinLimitReached = data.pinnedPresets.length >= PIN_LIMIT;\n\n  const recentPresets = data.recentPresets?.map((preset) => (\n    <li key={`recent-${preset.id}`} className={styles.listItem}>\n      <SegmentsPreset\n        uiPreset={preset}\n        id={preset.id}\n        pinLimitReached={pinLimitReached}\n        isPinned={data.pinnedPresets.some(\n          (pinnedPreset) => preset.id === pinnedPreset.id,\n        )}\n        isSelected={isSelectedPreset(segments, preset.segments)}\n      />\n    </li>\n  ));\n\n  const primaryContent =\n    recentPresets.length > 3 ? recentPresets.slice(0, 2) : recentPresets;\n  const extendedContent =\n    recentPresets.length > 3 ? recentPresets.slice(2) : null;\n\n  const showRecent = data.recentPresets.length > 0;\n  const showPinned = data.pinnedPresets.length > 0;\n\n  return (\n    <>\n      {showDivider && <Divider />}\n      <Flex\n        flexDirection=\"column\"\n        width=\"100%\"\n        px={0}\n        pb={4}\n        gap={0}\n        pt={showDivider ? 12 : 0}\n        className={clsx({\n          [animationHelperStyles.isAnimating]: isAnimating,\n        })}\n      >\n        {showRecent && (\n          <Flex flexDirection=\"column\" gap={0} width=\"100%\">\n            <Text\n              textStyle=\"small-emphasized\"\n              className={styles.sectionHeadline}\n            >\n              <FormattedMessage\n                id=\"QZdQoUnAWKJYAyK2\"\n                defaultMessage=\"Recently used\"\n                description=\"Headline to group recently used segments presets.\"\n              />\n            </Text>\n\n            {/** The AnimatePresence is needed here to prevent the initial animation of the recent presets. */}\n            <AnimatePresence initial={false} key=\"recent-presets\">\n              <ShowMorePanel>\n                <ShowMorePanel.PrimaryContent>\n                  {primaryContent}\n                </ShowMorePanel.PrimaryContent>\n                {extendedContent && (\n                  <ShowMorePanel.ExtendedContent>\n                    {extendedContent}\n                  </ShowMorePanel.ExtendedContent>\n                )}\n              </ShowMorePanel>\n            </AnimatePresence>\n          </Flex>\n        )}\n        <AnimatePresence initial={false} key=\"pinned-presets\">\n          {showPinned && (\n            <Flex\n              as={motion.div}\n              flexDirection=\"column\"\n              gap={4}\n              variants={expandAndCollapseAnimationVariants}\n              initial=\"exit\"\n              animate=\"enter\"\n              exit=\"exit\"\n              onAnimationStart={() => setIsAnimating(true)}\n              onAnimationComplete={() => setIsAnimating(false)}\n            >\n              {showRecent && showPinned && <Divider />}\n              <Text\n                key=\"pinned-header\"\n                textStyle=\"small-emphasized\"\n                className={styles.sectionHeadline}\n                style={{ paddingTop: Spacings.Size12 }}\n              >\n                <FormattedMessage\n                  key=\"pinned-header-text\"\n                  id=\"568KZGFcxrq95nEC\"\n                  defaultMessage=\"Pinned in {appName}\"\n                  description=\"Headline to group recently used segments presets.\"\n                  values={{ appName: getAppName() }}\n                />\n              </Text>\n              <ul className={styles.list}>\n                <AnimatePresence initial={false} key=\"pinned-presets-list\">\n                  {data.pinnedPresets.map((preset) => (\n                    <li key={`pinned-${preset.id}`} className={styles.listItem}>\n                      <SegmentsPreset\n                        uiPreset={preset}\n                        id={preset.id}\n                        pinLimitReached={pinLimitReached}\n                        isPinned={true}\n                        isSelected={isSelectedPreset(segments, preset.segments)}\n                      />\n                    </li>\n                  ))}\n                </AnimatePresence>\n              </ul>\n            </Flex>\n          )}\n        </AnimatePresence>\n      </Flex>\n    </>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelect.css

@@ -1,47 +1,47 @@
-._1fuxi5m0-3-0-1 {
+._1fuxi5m0-3-1-0 {
   width: 100%;
   border-top-left-radius: 0;
 }
-._1fuxi5m2-3-0-1._1fuxi5m2-3-0-1 {
+._1fuxi5m2-3-1-0._1fuxi5m2-3-1-0 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1fuxi5m3-3-0-1 {
+._1fuxi5m3-3-1-0 {
   grid-area: clear;
   grid-row-start: 1;
 }
-._1fuxi5m3-3-0-1._1fuxi5m3-3-0-1 {
+._1fuxi5m3-3-1-0._1fuxi5m3-3-1-0 {
   height: 100%;
   border-radius: 0 var(--dt-borders-radius-field-default, 6px) var(--dt-borders-radius-field-default, 6px) 0;
 }
-._1fuxi5m4-3-0-1 {
+._1fuxi5m4-3-1-0 {
   gap: 2px;
   width: 100%;
   grid-template-columns: 40% auto max-content;
 }
-._1fuxi5m5-3-0-1 {
+._1fuxi5m5-3-1-0 {
   grid-template-areas: "segment variables clear";
 }
-._1fuxi5m6-3-0-1 {
+._1fuxi5m6-3-1-0 {
   grid-template-areas: "segment variables";
   grid-template-columns: 40% auto;
 }
-._1fuxi5m7-3-0-1 {
+._1fuxi5m7-3-1-0 {
   grid-template-areas: "segment segment clear";
 }
-._1fuxi5m8-3-0-1 {
+._1fuxi5m8-3-1-0 {
   grid-template-areas: "segment segment";
 }
 @media screen and (min-width: 641px) {
-  ._1fuxi5m0-3-0-1 {
+  ._1fuxi5m0-3-1-0 {
     border-bottom-left-radius: 0;
   }
 }
 @media screen and (max-width: 640px) {
-  ._1fuxi5m1-3-0-1 {
+  ._1fuxi5m1-3-1-0 {
     border-bottom-left-radius: 0;
   }
-  ._1fuxi5m5-3-0-1 {
+  ._1fuxi5m5-3-1-0 {
     grid-template-areas: "segment segment clear" "variables variables clear";
   }
 }

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelect.sty.js

@@ -1,10 +1,10 @@
 import "./SegmentSelect.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearButtonCSS = "_1fuxi5m3-3-0-1";
-var noBorderRadiusRight = "_1fuxi5m2-3-0-1";
-var segmentsSelectCSS = "_1fuxi5m1-3-0-1";
-var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m4-3-0-1", variantClassNames: { layout: { full: "_1fuxi5m5-3-0-1", "full-readonly": "_1fuxi5m6-3-0-1", "no-variables": "_1fuxi5m7-3-0-1", "no-variables-readonly": "_1fuxi5m8-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var variablesSelectCSS = "_1fuxi5m0-3-0-1";
+var clearButtonCSS = "_1fuxi5m3-3-1-0";
+var noBorderRadiusRight = "_1fuxi5m2-3-1-0";
+var segmentsSelectCSS = "_1fuxi5m1-3-1-0";
+var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m4-3-1-0", variantClassNames: { layout: { full: "_1fuxi5m5-3-1-0", "full-readonly": "_1fuxi5m6-3-1-0", "no-variables": "_1fuxi5m7-3-1-0", "no-variables-readonly": "_1fuxi5m8-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var variablesSelectCSS = "_1fuxi5m0-3-1-0";
 export {
   clearButtonCSS,
   noBorderRadiusRight,

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelect.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelect.css.ts"],
-  "sourcesContent": ["import './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m3-3-0-1';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-0-1';\nexport var segmentsSelectCSS = '_1fuxi5m1-3-0-1';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m4-3-0-1',variantClassNames:{layout:{full:'_1fuxi5m5-3-0-1','full-readonly':'_1fuxi5m6-3-0-1','no-variables':'_1fuxi5m7-3-0-1','no-variables-readonly':'_1fuxi5m8-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var variablesSelectCSS = '_1fuxi5m0-3-0-1';"],
+  "sourcesContent": ["import './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m3-3-1-0';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-1-0';\nexport var segmentsSelectCSS = '_1fuxi5m1-3-1-0';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m4-3-1-0',variantClassNames:{layout:{full:'_1fuxi5m5-3-1-0','full-readonly':'_1fuxi5m6-3-1-0','no-variables':'_1fuxi5m7-3-1-0','no-variables-readonly':'_1fuxi5m8-3-1-0'}},defaultVariants:{},compoundVariants:[]});\nexport var variablesSelectCSS = '_1fuxi5m0-3-1-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB;AACrB,IAAI,sBAAsB;AAC1B,IAAI,oBAAoB;AACxB,IAAI,wBAAwB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,iBAAgB,mBAAkB,gBAAe,mBAAkB,yBAAwB,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/Q,IAAI,qBAAqB;",
   "names": []
 }

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.css

@@ -1,3 +1,3 @@
-._1e5el1o0-3-0-1 {
+._1e5el1o0-3-1-0 {
   max-width: 400px;
 }

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.sty.js

@@ -1,5 +1,5 @@
 import "./SegmentSelectorTrigger.css";
-var trigger = "_1e5el1o0-3-0-1";
+var trigger = "_1e5el1o0-3-1-0";
 export {
   trigger
 };

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.css.ts"],
-  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-0-1';"],
+  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/filters/segment-selector/segmentMessages.js

@@ -36,9 +36,9 @@ const SEGMENTSELECTOR_MESSAGES = defineMessages({
     description: "Hint to copy details to share with an admin."
   },
   defaultAriaLabel: {
-    defaultMessage: "Select segments",
+    defaultMessage: "Filter by segments",
     description: "Text for SegmentSelector Trigger when no segment is selected yet.",
-    id: "H+FbQv2DsY3NK35/"
+    id: "q/AKqzat66d0tRr7"
   },
   docsLinkText: {
     defaultMessage: "Learn more about segments",
@@ -53,7 +53,7 @@ const SEGMENTSELECTOR_MESSAGES = defineMessages({
   emptyString: {
     defaultMessage: "Empty value",
     description: "Display text for segment variable values that are an empty string.",
-    id: "lsbgYRwHRcNqwqaQ"
+    id: "wtm8N4m0hully7OX"
   },
   filteredSegmentNotFound: {
     defaultMessage: "No matching segments found. If you\u2019re looking for a segment value, select the segment first.",
@@ -105,11 +105,6 @@ const SEGMENTSELECTOR_MESSAGES = defineMessages({
     defaultMessage: "Your assigned access control policies don't permit you to read or apply segments.",
     description: "Message shown when access control permissions are missing but a query with segments was run."
   },
-  noSegmentsAppliedTooltip: {
-    defaultMessage: "No segment applied",
-    description: "Tooltip message when no segment is selected.",
-    id: "zFjudnAtO+XBWdDb"
-  },
   noSegmentsConfigured: {
     defaultMessage: "No segments configured.",
     description: "Message shown in the empty state of the segmentsSelector.",

package/esm/filters/segment-selector/segmentMessages.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/segment-selector/segmentMessages.ts"],
-  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const SEGMENTSELECTOR_MESSAGES = defineMessages({\n  addSegment: {\n    defaultMessage: 'Add',\n    description:\n      'Aria-label for the + in the \"add segment\" button to convey the functionality.',\n    id: 'SzcXIJL/aWzjy5Ig',\n  },\n  arrayIdentifierError: {\n    id: 'eYRqhWFzgj9ne5TC',\n    defaultMessage: 'The first column of a variable cannot be an array.',\n    description:\n      'Error message shown when a segment variable is identified by a first column array.',\n  },\n  applyButton: {\n    defaultMessage: 'Apply',\n    description:\n      'Button in the SegmentSelector overlay to apply the segment selection.',\n    id: 'DswaMGT7rt2ajcbI',\n  },\n  clearAll: {\n    defaultMessage: 'Clear all',\n    description: 'Label for the clear all button.',\n    id: 'e2L/mGCBvRqDTvq2',\n  },\n  clearSegments: {\n    defaultMessage: 'Clear segments',\n    description:\n      'Label for the clear segments button when segments are applied but the user has no permissions.',\n    id: 'WxdPgLpYTL0pyM92',\n  },\n  copyDetailsButton: {\n    id: 'OVHWs31OggLCgWSq',\n    defaultMessage: 'Copy details',\n    description: 'Label for the copy details button in SegmentsOverlay.',\n  },\n  copyDetailsHint: {\n    id: 'bx7cExKj4X9tpZgs',\n    defaultMessage: 'Please copy the details and share them with your admin.',\n    description: 'Hint to copy details to share with an admin.',\n  },\n  defaultAriaLabel: {\n    defaultMessage: 'Select segments',\n    description:\n      'Text for SegmentSelector Trigger when no segment is selected yet.',\n    id: 'H+FbQv2DsY3NK35/',\n  },\n  docsLinkText: {\n    defaultMessage: 'Learn more about segments',\n    description: 'Display text for the link to the segments documentation.',\n    id: 'ZFLXYT4zoCbKvGNP',\n  },\n  docsLinkTextShort: {\n    defaultMessage: 'Learn more',\n    description:\n      'Short version of the display text for the link to the segments documentation.',\n    id: 'Xxl1F0GNIQlu2LSH',\n  },\n  emptyString: {\n    defaultMessage: 'Empty value',\n    description:\n      'Display text for segment variable values that are an empty string.',\n    id: 'lsbgYRwHRcNqwqaQ',\n  },\n  filteredSegmentNotFound: {\n    defaultMessage:\n      'No matching segments found. If you\u2019re looking for a segment value, select the segment first.',\n    description:\n      \"Hint shown when searching for a segment variable that isn't in the list.\",\n    id: 'ovlsWnQ6TNpxUzyF',\n  },\n  genericSegmentError: {\n    defaultMessage:\n      'The applied segments are outdated. Please check your selection in the overlay.',\n    description:\n      'Error message indicating that something with the current selection is wrong and, therefore, should be checked.',\n    id: 'LhnAiI2sqynNbsba',\n  },\n  legend: {\n    defaultMessage: 'Filter by segments',\n    description: 'FieldSet Label in SegmentSelector Overlay.',\n    id: '+uTtPJkLATW51CDB',\n  },\n  linkMenuTrigger: {\n    defaultMessage: 'Open to find further resources',\n    description:\n      'Aria-label for menu trigger for collapsed resource links on mobile.',\n    id: 'ymTPa3UIE2oxpoEr',\n  },\n  loadingAriaLabel: {\n    defaultMessage: 'Loading segments',\n    description:\n      'Aria-label for the loading view within the SegmentSelector Overlay.',\n    id: 'iygPRzX1n+gL7TLR',\n  },\n  manageSegments: {\n    defaultMessage: 'Manage segments',\n    description: 'Display text for the link to the SegmentsManager app.',\n    id: 'MsfOpUQyZ0eEZ/5T',\n  },\n  moreTooltip: {\n    defaultMessage: '+{number} more',\n    description:\n      'Tooltip message when the tooltip is too big and shows the first selected segment and +X more for the remaining.',\n    id: 'GFd2oJ+U46/o0aMy',\n  },\n  noAccessNoSegments: {\n    id: 'eJrsgl5/4XpLIWxo',\n    defaultMessage:\n      \"Your assigned access control policies don't permit you to use segments.\",\n    description:\n      'Message shown when access control permissions are missing and no segments are applied.',\n  },\n  noReadAccess: {\n    id: 'ExRdGipMUK2Tldxd',\n    defaultMessage:\n      \"Segments are applied but your assigned access control policies don't permit you to read them.\",\n    description:\n      'Message shown when access control permissions (read) are missing and segments are already applied.',\n  },\n  noReadAndWriteAccess: {\n    id: 'mtKUJAn0mf0dbG4E',\n    defaultMessage:\n      \"Your assigned access control policies don't permit you to read or apply segments.\",\n    description:\n      'Message shown when access control permissions are missing but a query with segments was run.',\n  },\n  noSegmentsAppliedTooltip: {\n    defaultMessage: 'No segment applied',\n    description: 'Tooltip message when no segment is selected.',\n    id: 'zFjudnAtO+XBWdDb',\n  },\n  noSegmentsConfigured: {\n    defaultMessage: 'No segments configured.',\n    description: 'Message shown in the empty state of the segmentsSelector.',\n    id: 'Mexo5VI0BZU5Mw8b',\n  },\n  noSegmentVariablesAvailable: {\n    defaultMessage:\n      'No values for this segment available. You can manage this segment in settings.',\n    description:\n      'Empty state message if no variables for the segment are available.',\n    id: 'RoNWrUBQf8gR7lxZ',\n  },\n  pinButton: {\n    defaultMessage: 'Pin',\n    description: 'Text for the pin button of a segment preset.',\n    id: 'L4FYL0HqCIFzBkzf',\n  },\n  removedVariablesError: {\n    defaultMessage:\n      'This segment is no longer using variables. Click apply to refresh it.',\n    description:\n      'Error message shown when the selected segment has variables but does not expect any.',\n    id: 'aGMowcWvdm+5M63D',\n  },\n  removeSegmentButton: {\n    defaultMessage: 'Remove segment',\n    description: 'Aria-label for the remove button of a segments select.',\n    id: 'S6z4dIJ7FiELVt5X',\n  },\n  segmentsSelectEmptyState: {\n    defaultMessage: 'No other segments available.',\n    description: 'Message shown if all available segments have been selected.',\n    id: 'CzhNdiuuquVgEUTg',\n  },\n  segmentsSelectEmptyStateSearch: {\n    defaultMessage:\n      'No matching segments found. If you\u2019re looking for a segment value, select the segment first.',\n    description: 'Message for an empty search result in the segment select.',\n    id: 'yJBeHrP0dl2h/JIx',\n  },\n  segmentsTriggerPlaceholder: {\n    defaultMessage: 'Select segment',\n    description:\n      'Placeholder for the trigger of the select within the segmentSelector Overlay.',\n    id: 'oSKhN7fSy19ei878',\n  },\n  segmentsVariableTriggerPlaceholder: {\n    defaultMessage: 'Select value',\n    description:\n      'Placeholder for the trigger of the select within the segmentSelector Overlay.',\n    id: 'RuGHpilISAqb1dDM',\n  },\n  unavailable: {\n    defaultMessage: 'Unavailable',\n    description:\n      'Description for unavailable segment variables, e.g. if the variable is not available any longer.',\n    id: 'K+rYESaxckSqgeF/',\n  },\n  unavailableSegmentError: {\n    defaultMessage:\n      \"This segment doesn't exist anymore. Please remove it from the selection.\",\n    description:\n      'Error message if the segment was removed but is still selected.',\n    id: '+kn/ILSk7yxtVqQ/',\n  },\n  unlistedSegmentTooltip: {\n    defaultMessage:\n      'Someone else applied this segment, which is usually not available to you. You can only view or remove it.',\n    description: 'Description for the tooltip of an unlisted segment.',\n    id: 'UdBwDtbEgD8ojnmL',\n  },\n  valueMissingError: {\n    defaultMessage: 'At least one value must be selected.',\n    description: 'Error message shown when no value is selected.',\n    id: 'qDnh6SFkeo10shlI',\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,2BAA2B,eAAe;AAAA,EACrD,YAAY;AAAA,IACV,gBAAgB;AAAA,IAChB,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,sBAAsB;AAAA,IACpB,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AAAA,EACA,aAAa;AAAA,IACX,gBAAgB;AAAA,IAChB,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACR,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,IAAI;AAAA,EACN;AAAA,EACA,eAAe;AAAA,IACb,gBAAgB;AAAA,IAChB,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,mBAAmB;AAAA,IACjB,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,iBAAiB;AAAA,IACf,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,IAChB,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,cAAc;AAAA,IACZ,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,IAAI;AAAA,EACN;AAAA,EACA,mBAAmB;AAAA,IACjB,gBAAgB;AAAA,IAChB,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,aAAa;AAAA,IACX,gBAAgB;AAAA,IAChB,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,yBAAyB;AAAA,IACvB,gBACE;AAAA,IACF,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,qBAAqB;AAAA,IACnB,gBACE;AAAA,IACF,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACN,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,IAAI;AAAA,EACN;AAAA,EACA,iBAAiB;AAAA,IACf,gBAAgB;AAAA,IAChB,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,IAChB,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,gBAAgB;AAAA,IACd,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,IAAI;AAAA,EACN;AAAA,EACA,aAAa;AAAA,IACX,gBAAgB;AAAA,IAChB,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,oBAAoB;AAAA,IAClB,IAAI;AAAA,IACJ,gBACE;AAAA,IACF,aACE;AAAA,EACJ;AAAA,EACA,cAAc;AAAA,IACZ,IAAI;AAAA,IACJ,gBACE;AAAA,IACF,aACE;AAAA,EACJ;AAAA,EACA,sBAAsB;AAAA,IACpB,IAAI;AAAA,IACJ,gBACE;AAAA,IACF,aACE;AAAA,EACJ;AAAA,EACA,0BAA0B;AAAA,IACxB,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,IAAI;AAAA,EACN;AAAA,EACA,sBAAsB;AAAA,IACpB,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,IAAI;AAAA,EACN;AAAA,EACA,6BAA6B;AAAA,IAC3B,gBACE;AAAA,IACF,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,WAAW;AAAA,IACT,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,IAAI;AAAA,EACN;AAAA,EACA,uBAAuB;AAAA,IACrB,gBACE;AAAA,IACF,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,qBAAqB;AAAA,IACnB,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,IAAI;AAAA,EACN;AAAA,EACA,0BAA0B;AAAA,IACxB,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,IAAI;AAAA,EACN;AAAA,EACA,gCAAgC;AAAA,IAC9B,gBACE;AAAA,IACF,aAAa;AAAA,IACb,IAAI;AAAA,EACN;AAAA,EACA,4BAA4B;AAAA,IAC1B,gBAAgB;AAAA,IAChB,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,oCAAoC;AAAA,IAClC,gBAAgB;AAAA,IAChB,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,aAAa;AAAA,IACX,gBAAgB;AAAA,IAChB,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,yBAAyB;AAAA,IACvB,gBACE;AAAA,IACF,aACE;AAAA,IACF,IAAI;AAAA,EACN;AAAA,EACA,wBAAwB;AAAA,IACtB,gBACE;AAAA,IACF,aAAa;AAAA,IACb,IAAI;AAAA,EACN;AAAA,EACA,mBAAmB;AAAA,IACjB,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,IAAI;AAAA,EACN;AACF,CAAC;",
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const SEGMENTSELECTOR_MESSAGES = defineMessages({\n  addSegment: {\n    defaultMessage: 'Add',\n    description:\n      'Aria-label for the + in the \"add segment\" button to convey the functionality.',\n    id: 'SzcXIJL/aWzjy5Ig',\n  },\n  arrayIdentifierError: {\n    id: 'eYRqhWFzgj9ne5TC',\n    defaultMessage: 'The first column of a variable cannot be an array.',\n    description:\n      'Error message shown when a segment variable is identified by a first column array.',\n  },\n  applyButton: {\n    defaultMessage: 'Apply',\n    description:\n      'Button in the SegmentSelector overlay to apply the segment selection.',\n    id: 'DswaMGT7rt2ajcbI',\n  },\n  clearAll: {\n    defaultMessage: 'Clear all',\n    description: 'Label for the clear all button.',\n    id: 'e2L/mGCBvRqDTvq2',\n  },\n  clearSegments: {\n    defaultMessage: 'Clear segments',\n    description:\n      'Label for the clear segments button when segments are applied but the user has no permissions.',\n    id: 'WxdPgLpYTL0pyM92',\n  },\n  copyDetailsButton: {\n    id: 'OVHWs31OggLCgWSq',\n    defaultMessage: 'Copy details',\n    description: 'Label for the copy details button in SegmentsOverlay.',\n  },\n  copyDetailsHint: {\n    id: 'bx7cExKj4X9tpZgs',\n    defaultMessage: 'Please copy the details and share them with your admin.',\n    description: 'Hint to copy details to share with an admin.',\n  },\n  defaultAriaLabel: {\n    defaultMessage: 'Filter by segments',\n    description:\n      'Text for SegmentSelector Trigger when no segment is selected yet.',\n    id: 'q/AKqzat66d0tRr7',\n  },\n  docsLinkText: {\n    defaultMessage: 'Learn more about segments',\n    description: 'Display text for the link to the segments documentation.',\n    id: 'ZFLXYT4zoCbKvGNP',\n  },\n  docsLinkTextShort: {\n    defaultMessage: 'Learn more',\n    description:\n      'Short version of the display text for the link to the segments documentation.',\n    id: 'Xxl1F0GNIQlu2LSH',\n  },\n  emptyString: {\n    defaultMessage: 'Empty value',\n    description:\n      'Display text for segment variable values that are an empty string.',\n    id: 'wtm8N4m0hully7OX',\n  },\n  filteredSegmentNotFound: {\n    defaultMessage:\n      'No matching segments found. If you\u2019re looking for a segment value, select the segment first.',\n    description:\n      \"Hint shown when searching for a segment variable that isn't in the list.\",\n    id: 'ovlsWnQ6TNpxUzyF',\n  },\n  genericSegmentError: {\n    defaultMessage:\n      'The applied segments are outdated. Please check your selection in the overlay.',\n    description:\n      'Error message indicating that something with the current selection is wrong and, therefore, should be checked.',\n    id: 'LhnAiI2sqynNbsba',\n  },\n  legend: {\n    defaultMessage: 'Filter by segments',\n    description: 'FieldSet Label in SegmentSelector Overlay.',\n    id: '+uTtPJkLATW51CDB',\n  },\n  linkMenuTrigger: {\n    defaultMessage: 'Open to find further resources',\n    description:\n      'Aria-label for menu trigger for collapsed resource links on mobile.',\n    id: 'ymTPa3UIE2oxpoEr',\n  },\n  loadingAriaLabel: {\n    defaultMessage: 'Loading segments',\n    description:\n      'Aria-label for the loading view within the SegmentSelector Overlay.',\n    id: 'iygPRzX1n+gL7TLR',\n  },\n  manageSegments: {\n    defaultMessage: 'Manage segments',\n    description: 'Display text for the link to the SegmentsManager app.',\n    id: 'MsfOpUQyZ0eEZ/5T',\n  },\n  moreTooltip: {\n    defaultMessage: '+{number} more',\n    description:\n      'Tooltip message when the tooltip is too big and shows the first selected segment and +X more for the remaining.',\n    id: 'GFd2oJ+U46/o0aMy',\n  },\n  noAccessNoSegments: {\n    id: 'eJrsgl5/4XpLIWxo',\n    defaultMessage:\n      \"Your assigned access control policies don't permit you to use segments.\",\n    description:\n      'Message shown when access control permissions are missing and no segments are applied.',\n  },\n  noReadAccess: {\n    id: 'ExRdGipMUK2Tldxd',\n    defaultMessage:\n      \"Segments are applied but your assigned access control policies don't permit you to read them.\",\n    description:\n      'Message shown when access control permissions (read) are missing and segments are already applied.',\n  },\n  noReadAndWriteAccess: {\n    id: 'mtKUJAn0mf0dbG4E',\n    defaultMessage:\n      \"Your assigned access control policies don't permit you to read or apply segments.\",\n    description:\n      'Message shown when access control permissions are missing but a query with segments was run.',\n  },\n  noSegmentsConfigured: {\n    defaultMessage: 'No segments configured.',\n    description: 'Message shown in the empty state of the segmentsSelector.',\n    id: 'Mexo5VI0BZU5Mw8b',\n  },\n  noSegmentVariablesAvailable: {\n    defaultMessage:\n      'No values for this segment available. You can manage this segment in settings.',\n    description:\n      'Empty state message if no variables for the segment are available.',\n    id: 'RoNWrUBQf8gR7lxZ',\n  },\n  pinButton: {\n    defaultMessage: 'Pin',\n    description: 'Text for the pin button of a segment preset.',\n    id: 'L4FYL0HqCIFzBkzf',\n  },\n  removedVariablesError: {\n    defaultMessage:\n      'This segment is no longer using variables. Click apply to refresh it.',\n    description:\n      'Error message shown when the selected segment has variables but does not expect any.',\n    id: 'aGMowcWvdm+5M63D',\n  },\n  removeSegmentButton: {\n    defaultMessage: 'Remove segment',\n    description: 'Aria-label for the remove button of a segments select.',\n    id: 'S6z4dIJ7FiELVt5X',\n  },\n  segmentsSelectEmptyState: {\n    defaultMessage: 'No other segments available.',\n    description: 'Message shown if all available segments have been selected.',\n    id: 'CzhNdiuuquVgEUTg',\n  },\n  segmentsSelectEmptyStateSearch: {\n    defaultMessage:\n      'No matching segments found. If you\u2019re looking for a segment value, select the segment first.',\n    description: 'Message for an empty search result in the segment select.',\n    id: 'yJBeHrP0dl2h/JIx',\n  },\n  segmentsTriggerPlaceholder: {\n    defaultMessage: 'Select segment',\n    description:\n      'Placeholder for the trigger of the select within the segmentSelector Overlay.',\n    id: 'oSKhN7fSy19ei878',\n  },\n  segmentsVariableTriggerPlaceholder: {\n    defaultMessage: 'Select value',\n    description:\n      'Placeholder for the trigger of the select within the segmentSelector Overlay.',\n    id: 'RuGHpilISAqb1dDM',\n  },\n  unavailable: {\n    defaultMessage: 'Unavailable',\n    description:\n      'Description for unavailable segment variables, e.g. if the variable is not available any longer.',\n    id: 'K+rYESaxckSqgeF/',\n  },\n  unavailableSegmentError: {\n    defaultMessage:\n      \"This segment doesn't exist anymore. Please remove it from the selection.\",\n    description:\n      'Error message if the segment was removed but is still selected.',\n    id: '+kn/ILSk7yxtVqQ/',\n  },\n  unlistedSegmentTooltip: {\n    defaultMessage:\n      'Someone else applied this segment, which is usually not available to you. You can only view or remove it.',\n    description: 'Description for the tooltip of an unlisted segment.',\n    id: 'UdBwDtbEgD8ojnmL',\n  },\n  valueMissingError: {\n    defaultMessage: 'At least one value must be selected.',\n    description: 'Error message shown when no value is selected.',\n    id: 'qDnh6SFkeo10shlI',\n  },\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/filters/timeframe-selector/TimeframeSelector.css

@@ -1,64 +1,4 @@
-._1sqhmjg0-3-0-1 {
-  cursor: not-allowed;
-}
-._1sqhmjg1-3-0-1 {
-  font-size: 0;
-  transition-property: transform;
-}
-._1sqhmjg2-3-0-1 {
-  transform: rotate(180deg);
-}
-._1sqhmjg3-3-0-1 {
+._1sqhmjg0-3-1-0 {
   min-width: 0;
   box-sizing: border-box;
-}
-._1sqhmjg4-3-0-1 {
-  fill: var(--dt-colors-icon-neutral-subdued, #595a7d);
-}
-._1sqhmjg5-3-0-1 {
-  display: flex;
-  gap: var(--dt-spacings-size-4, 4px);
-  padding-top: var(--dt-spacings-size-8, 8px);
-  padding-bottom: var(--dt-spacings-size-8, 8px);
-  padding-left: var(--dt-spacings-size-12, 12px);
-  padding-right: var(--dt-spacings-size-12, 12px);
-  box-sizing: border-box;
-  width: 100%;
-  flex-direction: column;
-}
-._1sqhmjg6-3-0-1 {
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-  gap: var(--dt-spacings-size-4, 4px);
-}
-._1sqhmjg7-3-0-1 {
-  background: var(--dt-colors-background-surface-default, #fff);
-  box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
-  border-radius: var(--dt-borders-radius-container-default, 9px);
-  z-index: var(--dt-elevations-overlay, 20);
-  overflow-y: auto;
-  box-sizing: border-box;
-  align-items: flex-start;
-  width: 100vw;
-}
-._1sqhmjg8-3-0-1 {
-  overflow-wrap: break-word;
-  font-size: var(--dt-typography-text-small-default-size, 12px);
-  line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
-  color: var(--dt-colors-text-neutral-subdued, #595a7d);
-}
-._1sqhmjg9-3-0-1 {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  gap: 4px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-@media screen and (min-width: 640px) {
-  ._1sqhmjg5-3-0-1 {
-    flex-direction: row;
-  }
 }

package/esm/filters/timeframe-selector/TimeframeSelector.js

@@ -1,5 +1,4 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
 import { debounce } from "lodash-es";
 import {
   Children,
@@ -12,31 +11,32 @@ import {
   useState
 } from "react";
 import { useIntl } from "react-intl";
-import { ChevronDownSmallIcon } from "@dynatrace/strato-icons";
-import { InternalTimeframeSelectorContext } from "./contexts/InternalTimeframeSelectorContext.js";
-import { TimeframeSelectorContext } from "./contexts/TimeframeSelectorContext.js";
+import { TimeframeSelectorOverlay } from "./components/overlay/TimeframeSelectorOverlay.js";
+import { PresetItem } from "./components/presets/PresetItem.js";
+import { Presets } from "./components/presets/Presets.js";
+import { StepperButton } from "./components/stepper/StepperButton.js";
+import { TimeframeSelectorTooltip } from "./components/TimeframeSelectorTooltip.js";
 import {
-  _isTimeframeSelectorCustomTriggerElement,
+  isTimeframeSelectorCustomTriggerElement,
   CustomTrigger
-} from "./CustomTrigger.js";
-import { DisplayValue } from "./DisplayValue.js";
-import { PresetItem } from "./Item.js";
-import { Presets } from "./Presets.js";
-import { StepperButton } from "./StepperButton.js";
-import {
-  timeframeSelectorSuffixCSS,
-  timeframeSelectorSuffixOpenCSS,
-  timeframeSelectorTriggerReadOnlyCSS
-} from "./TimeframeSelector.sty.js";
-import { TimeframeSelectorOverlay } from "./TimeframeSelectorOverlay.js";
-import { TimeframeSelectorTooltip } from "./TimeframeSelectorTooltip.js";
+} from "./components/trigger/CustomTrigger.js";
+import { DisplayValue } from "./components/trigger/DisplayValue.js";
 import {
-  _isTimeframeSelectorTriggerElement,
+  isTimeframeSelectorTriggerElement,
   Trigger
-} from "./Trigger.js";
+} from "./components/trigger/Trigger.js";
+import { InternalTimeframeSelectorContext } from "./contexts/InternalTimeframeSelectorContext.js";
+import { TimeframeSelectorContext } from "./contexts/TimeframeSelectorContext.js";
 import { getTimeframeDisplayValueProps } from "./utils/getTimeframeDisplayValueProps.js";
+import {
+  getTimeframePresets,
+  saveRecentTimeframe
+} from "./utils/presets-helpers.js";
 import { isTimeframeWithFromAndTo } from "./utils/timeframe-selection.js";
-import { Button } from "../../buttons/button/Button.js";
+import {
+  TIMEFRAME_PRESETS_QUERY_KEY,
+  timeframeQueryClient
+} from "./utils/TimeframePresetsClient.js";
 import { VisuallyHidden } from "../../core/components/visually-hidden/VisuallyHidden.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
 import { useFormControlState } from "../../core/hooks/useFormControlState.js";
@@ -87,9 +87,9 @@ function getItemSlots(children, precision) {
           );
         }
       }
-    } else if (_isTimeframeSelectorCustomTriggerElement(child)) {
+    } else if (isTimeframeSelectorCustomTriggerElement(child)) {
       slots.customTrigger = child;
-    } else if (_isTimeframeSelectorTriggerElement(child)) {
+    } else if (isTimeframeSelectorTriggerElement(child)) {
       slots.trigger = child;
     } else {
       devLog("The used child is not supported by the TimeframeSelector.");
@@ -163,6 +163,7 @@ const _TimeframeSelector = forwardRef((props, forwardedRef) => {
   const debouncedSetValueRef = useRef(
     debounce((timeframe) => {
       setValueRef.current(timeframe);
+      saveRecentTimeframe(timeframe);
       setOptimisticTimeframeValue(null);
     }, STEPPER_DEBOUNCE_MS)
   );
@@ -215,6 +216,15 @@ const _TimeframeSelector = forwardRef((props, forwardedRef) => {
     disabled,
     onOpenChange
   });
+  useEffect(() => {
+    if (timeframeQueryClient.getQueryData(TIMEFRAME_PRESETS_QUERY_KEY)) {
+      return;
+    }
+    timeframeQueryClient.prefetchQuery({
+      queryKey: TIMEFRAME_PRESETS_QUERY_KEY,
+      queryFn: getTimeframePresets
+    });
+  }, []);
   const details = useMemo(() => {
     const { from, to } = parseValue(effectiveValue);
     return from && to ? { from, to } : null;
@@ -325,6 +335,7 @@ const _TimeframeSelector = forwardRef((props, forwardedRef) => {
   };
   const { ariaProps: ariaFormProps, onBlur } = useFormFieldValidation(
     fromInputRef,
+    {},
     ariaLabelingProps
   );
   useImperativeHandle(
@@ -390,6 +401,7 @@ const _TimeframeSelector = forwardRef((props, forwardedRef) => {
       disabled,
       onBlur: handleOnBlur,
       ref: triggerButtonRef,
+      id,
       "aria-disabled": ariaDisabled,
       ...ariaFormProps,
       ...readOnly ? {} : overlayTriggerProps,
@@ -399,6 +411,7 @@ const _TimeframeSelector = forwardRef((props, forwardedRef) => {
       disabled,
       handleOnBlur,
       triggerButtonRef,
+      id,
       ariaDisabled,
       displayValueError,
       ariaLabelProp,
@@ -530,29 +543,7 @@ const _TimeframeSelector = forwardRef((props, forwardedRef) => {
                           value: effectiveValue,
                           disabled,
                           precision,
-                          children: customTrigger ?? trigger ?? /* @__PURE__ */ jsxs(
-                            Button,
-                            {
-                              ...triggerProps,
-                              variant: "emphasized",
-                              id,
-                              color: showError ? "critical" : "neutral",
-                              className: readOnly ? timeframeSelectorTriggerReadOnlyCSS : void 0,
-                              textAlign: "start",
-                              children: [
-                                displayValue,
-                                /* @__PURE__ */ jsx(Button.Suffix, { children: /* @__PURE__ */ jsx(
-                                  ChevronDownSmallIcon,
-                                  {
-                                    className: clsx(
-                                      timeframeSelectorSuffixCSS,
-                                      overlayState.isOpen && timeframeSelectorSuffixOpenCSS
-                                    )
-                                  }
-                                ) })
-                              ]
-                            }
-                          )
+                          children: customTrigger ?? trigger ?? /* @__PURE__ */ jsx(Trigger, {})
                         }
                       ),
                       stepper && effectiveValue && isTimeframeWithFromAndTo(effectiveValue) && /* @__PURE__ */ jsxs(Fragment, { children: [