@dynatrace/strato-components 3.1.3 → 3.2.1

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

@@ -38,18 +38,26 @@ const SegmentsPresetList = ({
     return null;
   }
   const pinLimitReached = data.pinnedPresets.length >= PIN_LIMIT;
-  const recentPresets = data.recentPresets?.map((preset) => /* @__PURE__ */ jsx("li", { className: styles.listItem, children: /* @__PURE__ */ jsx(
-    SegmentsPreset,
+  const recentPresets = data.recentPresets?.map((preset) => /* @__PURE__ */ jsx(
+    "li",
     {
-      uiPreset: preset,
-      id: preset.id,
-      pinLimitReached,
-      isPinned: data.pinnedPresets.some(
-        (pinnedPreset) => preset.id === pinnedPreset.id
-      ),
-      isSelected: isSelectedPreset(segments, preset.segments)
-    }
-  ) }, `recent-${preset.id}`));
+      className: styles.listItem,
+      "data-dt-name": "Recent",
+      children: /* @__PURE__ */ jsx(
+        SegmentsPreset,
+        {
+          uiPreset: preset,
+          id: preset.id,
+          pinLimitReached,
+          isPinned: data.pinnedPresets.some(
+            (pinnedPreset) => preset.id === pinnedPreset.id
+          ),
+          isSelected: isSelectedPreset(segments, preset.segments)
+        }
+      )
+    },
+    `recent-${preset.id}`
+  ));
   const primaryContent = recentPresets.length > 3 ? recentPresets.slice(0, 2) : recentPresets;
   const extendedContent = recentPresets.length > 3 ? recentPresets.slice(2) : null;
   const showRecent = data.recentPresets.length > 0;
@@ -123,16 +131,24 @@ const SegmentsPresetList = ({
                   },
                   "pinned-header"
                 ),
-                /* @__PURE__ */ jsx("ul", { className: styles.list, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: data.pinnedPresets.map((preset) => /* @__PURE__ */ jsx("li", { className: styles.listItem, children: /* @__PURE__ */ jsx(
-                  SegmentsPreset,
+                /* @__PURE__ */ jsx("ul", { className: styles.list, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: data.pinnedPresets.map((preset) => /* @__PURE__ */ jsx(
+                  "li",
                   {
-                    uiPreset: preset,
-                    id: preset.id,
-                    pinLimitReached,
-                    isPinned: true,
-                    isSelected: isSelectedPreset(segments, preset.segments)
-                  }
-                ) }, `pinned-${preset.id}`)) }, "pinned-presets-list") })
+                    className: styles.listItem,
+                    "data-dt-name": "Pinned",
+                    children: /* @__PURE__ */ jsx(
+                      SegmentsPreset,
+                      {
+                        uiPreset: preset,
+                        id: preset.id,
+                        pinLimitReached,
+                        isPinned: true,
+                        isSelected: isSelectedPreset(segments, preset.segments)
+                      }
+                    )
+                  },
+                  `pinned-${preset.id}`
+                )) }, "pinned-presets-list") })
               ]
             }
           ) }, "pinned-presets")

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={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": "AAqDM,SAqBF,UArBE,KAiDQ,YAjDR;AArDN,SAAS,gBAAgB;AACzB,OAAO,UAAU;AACjB,SAAS,iBAAiB,cAAc;AACxC,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAEjC,OAAO,cAAc;AACrB,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AAEnC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,YAAY,YAAY;AACxB,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,YAAY,2BAA2B;AACvC,SAAS,qBAAqB;AAE9B,MAAM,YAAY;AAEX,MAAM,qBAAqB,CAAC;AAAA,EACjC;AACF,MAEM;AACJ,QAAM,EAAE,SAAS,IAAI,YAAY;AACjC,QAAM,EAAE,MAAM,UAAU,IAAI;AAAA,IAC1B;AAAA,MACE,UAAU,CAAC,oBAAoB;AAAA,MAC/B,SAAS;AAAA,MACT,qBAAqB,CAAC,eAAe;AAAA,IACvC;AAAA,IACA,eAAe;AAAA,EACjB;AACA,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,MACE,CAAC,QACA,KAAK,cAAc,WAAW,KAAK,KAAK,cAAc,WAAW,KAClE,WACA;AACA,WAAO;AAAA,EACT;AACA,QAAM,kBAAkB,KAAK,cAAc,UAAU;AAErD,QAAM,gBAAgB,KAAK,eAAe,IAAI,CAAC,WAC7C,oBAAC,QAA+B,WAAW,OAAO,UAChD;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI,OAAO;AAAA,MACX;AAAA,MACA,UAAU,KAAK,cAAc;AAAA,QAC3B,CAAC,iBAAiB,OAAO,OAAO,aAAa;AAAA,MAC/C;AAAA,MACA,YAAY,iBAAiB,UAAU,OAAO,QAAQ;AAAA;AAAA,EACxD,KATO,UAAU,OAAO,EAAE,EAU5B,CACD;AAED,QAAM,iBACJ,cAAc,SAAS,IAAI,cAAc,MAAM,GAAG,CAAC,IAAI;AACzD,QAAM,kBACJ,cAAc,SAAS,IAAI,cAAc,MAAM,CAAC,IAAI;AAEtD,QAAM,aAAa,KAAK,cAAc,SAAS;AAC/C,QAAM,aAAa,KAAK,cAAc,SAAS;AAE/C,SACE,iCACG;AAAA,mBAAe,oBAAC,WAAQ;AAAA,IACzB;AAAA,MAAC;AAAA;AAAA,QACC,eAAc;AAAA,QACd,OAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,KAAK;AAAA,QACL,IAAI,cAAc,KAAK;AAAA,QACvB,WAAW,KAAK;AAAA,UACd,CAAC,sBAAsB,WAAW,GAAG;AAAA,QACvC,CAAC;AAAA,QAEA;AAAA,wBACC,qBAAC,QAAK,eAAc,UAAS,KAAK,GAAG,OAAM,QACzC;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,WAAW,OAAO;AAAA,gBAElB;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAG;AAAA,oBACH,gBAAe;AAAA,oBACf,aAAY;AAAA;AAAA,gBACd;AAAA;AAAA,YACF;AAAA,YAGA,oBAAC,mBAAgB,SAAS,OACxB,+BAAC,iBACC;AAAA,kCAAC,cAAc,gBAAd,EACE,0BACH;AAAA,cACC,mBACC,oBAAC,cAAc,iBAAd,EACE,2BACH;AAAA,eAEJ,KAVmC,gBAWrC;AAAA,aACF;AAAA,UAEF,oBAAC,mBAAgB,SAAS,OACvB,wBACC;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,OAAO;AAAA,cACX,eAAc;AAAA,cACd,KAAK;AAAA,cACL,UAAU;AAAA,cACV,SAAQ;AAAA,cACR,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,kBAAkB,MAAM,eAAe,IAAI;AAAA,cAC3C,qBAAqB,MAAM,eAAe,KAAK;AAAA,cAE9C;AAAA,8BAAc,cAAc,oBAAC,WAAQ;AAAA,gBACtC;AAAA,kBAAC;AAAA;AAAA,oBAEC,WAAU;AAAA,oBACV,WAAW,OAAO;AAAA,oBAClB,OAAO,EAAE,YAAY,SAAS,OAAO;AAAA,oBAErC;AAAA,sBAAC;AAAA;AAAA,wBAEC,IAAG;AAAA,wBACH,gBAAe;AAAA,wBACf,aAAY;AAAA,wBACZ,QAAQ,EAAE,SAAS,WAAW,EAAE;AAAA;AAAA,sBAJ5B;AAAA,oBAKN;AAAA;AAAA,kBAXI;AAAA,gBAYN;AAAA,gBACA,oBAAC,QAAG,WAAW,OAAO,MACpB,8BAAC,mBAAgB,SAAS,OACvB,eAAK,cAAc,IAAI,CAAC,WACvB,oBAAC,QAA+B,WAAW,OAAO,UAChD;AAAA,kBAAC;AAAA;AAAA,oBACC,UAAU;AAAA,oBACV,IAAI,OAAO;AAAA,oBACX;AAAA,oBACA,UAAU;AAAA,oBACV,YAAY,iBAAiB,UAAU,OAAO,QAAQ;AAAA;AAAA,gBACxD,KAPO,UAAU,OAAO,EAAE,EAQ5B,CACD,KAXkC,qBAYrC,GACF;AAAA;AAAA;AAAA,UACF,KA3CiC,gBA6CrC;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "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\n      key={`recent-${preset.id}`}\n      className={styles.listItem}\n      data-dt-name=\"Recent\"\n    >\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\n                      key={`pinned-${preset.id}`}\n                      className={styles.listItem}\n                      data-dt-name=\"Pinned\"\n                    >\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": "AAyDM,SAqBF,UArBE,KAiDQ,YAjDR;AAzDN,SAAS,gBAAgB;AACzB,OAAO,UAAU;AACjB,SAAS,iBAAiB,cAAc;AACxC,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAEjC,OAAO,cAAc;AACrB,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AAEnC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,YAAY,YAAY;AACxB,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,YAAY,2BAA2B;AACvC,SAAS,qBAAqB;AAE9B,MAAM,YAAY;AAEX,MAAM,qBAAqB,CAAC;AAAA,EACjC;AACF,MAEM;AACJ,QAAM,EAAE,SAAS,IAAI,YAAY;AACjC,QAAM,EAAE,MAAM,UAAU,IAAI;AAAA,IAC1B;AAAA,MACE,UAAU,CAAC,oBAAoB;AAAA,MAC/B,SAAS;AAAA,MACT,qBAAqB,CAAC,eAAe;AAAA,IACvC;AAAA,IACA,eAAe;AAAA,EACjB;AACA,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,MACE,CAAC,QACA,KAAK,cAAc,WAAW,KAAK,KAAK,cAAc,WAAW,KAClE,WACA;AACA,WAAO;AAAA,EACT;AACA,QAAM,kBAAkB,KAAK,cAAc,UAAU;AAErD,QAAM,gBAAgB,KAAK,eAAe,IAAI,CAAC,WAC7C;AAAA,IAAC;AAAA;AAAA,MAEC,WAAW,OAAO;AAAA,MAClB,gBAAa;AAAA,MAEb;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV,IAAI,OAAO;AAAA,UACX;AAAA,UACA,UAAU,KAAK,cAAc;AAAA,YAC3B,CAAC,iBAAiB,OAAO,OAAO,aAAa;AAAA,UAC/C;AAAA,UACA,YAAY,iBAAiB,UAAU,OAAO,QAAQ;AAAA;AAAA,MACxD;AAAA;AAAA,IAZK,UAAU,OAAO,EAAE;AAAA,EAa1B,CACD;AAED,QAAM,iBACJ,cAAc,SAAS,IAAI,cAAc,MAAM,GAAG,CAAC,IAAI;AACzD,QAAM,kBACJ,cAAc,SAAS,IAAI,cAAc,MAAM,CAAC,IAAI;AAEtD,QAAM,aAAa,KAAK,cAAc,SAAS;AAC/C,QAAM,aAAa,KAAK,cAAc,SAAS;AAE/C,SACE,iCACG;AAAA,mBAAe,oBAAC,WAAQ;AAAA,IACzB;AAAA,MAAC;AAAA;AAAA,QACC,eAAc;AAAA,QACd,OAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,KAAK;AAAA,QACL,IAAI,cAAc,KAAK;AAAA,QACvB,WAAW,KAAK;AAAA,UACd,CAAC,sBAAsB,WAAW,GAAG;AAAA,QACvC,CAAC;AAAA,QAEA;AAAA,wBACC,qBAAC,QAAK,eAAc,UAAS,KAAK,GAAG,OAAM,QACzC;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,WAAW,OAAO;AAAA,gBAElB;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAG;AAAA,oBACH,gBAAe;AAAA,oBACf,aAAY;AAAA;AAAA,gBACd;AAAA;AAAA,YACF;AAAA,YAGA,oBAAC,mBAAgB,SAAS,OACxB,+BAAC,iBACC;AAAA,kCAAC,cAAc,gBAAd,EACE,0BACH;AAAA,cACC,mBACC,oBAAC,cAAc,iBAAd,EACE,2BACH;AAAA,eAEJ,KAVmC,gBAWrC;AAAA,aACF;AAAA,UAEF,oBAAC,mBAAgB,SAAS,OACvB,wBACC;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,OAAO;AAAA,cACX,eAAc;AAAA,cACd,KAAK;AAAA,cACL,UAAU;AAAA,cACV,SAAQ;AAAA,cACR,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,kBAAkB,MAAM,eAAe,IAAI;AAAA,cAC3C,qBAAqB,MAAM,eAAe,KAAK;AAAA,cAE9C;AAAA,8BAAc,cAAc,oBAAC,WAAQ;AAAA,gBACtC;AAAA,kBAAC;AAAA;AAAA,oBAEC,WAAU;AAAA,oBACV,WAAW,OAAO;AAAA,oBAClB,OAAO,EAAE,YAAY,SAAS,OAAO;AAAA,oBAErC;AAAA,sBAAC;AAAA;AAAA,wBAEC,IAAG;AAAA,wBACH,gBAAe;AAAA,wBACf,aAAY;AAAA,wBACZ,QAAQ,EAAE,SAAS,WAAW,EAAE;AAAA;AAAA,sBAJ5B;AAAA,oBAKN;AAAA;AAAA,kBAXI;AAAA,gBAYN;AAAA,gBACA,oBAAC,QAAG,WAAW,OAAO,MACpB,8BAAC,mBAAgB,SAAS,OACvB,eAAK,cAAc,IAAI,CAAC,WACvB;AAAA,kBAAC;AAAA;AAAA,oBAEC,WAAW,OAAO;AAAA,oBAClB,gBAAa;AAAA,oBAEb;AAAA,sBAAC;AAAA;AAAA,wBACC,UAAU;AAAA,wBACV,IAAI,OAAO;AAAA,wBACX;AAAA,wBACA,UAAU;AAAA,wBACV,YAAY,iBAAiB,UAAU,OAAO,QAAQ;AAAA;AAAA,oBACxD;AAAA;AAAA,kBAVK,UAAU,OAAO,EAAE;AAAA,gBAW1B,CACD,KAfkC,qBAgBrC,GACF;AAAA;AAAA;AAAA,UACF,KA/CiC,gBAiDrC;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

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

@@ -1,47 +1,47 @@
-._1fuxi5m0-3-1-3 {
+._1fuxi5m0-3-2-1 {
   width: 100%;
   border-top-left-radius: 0;
 }
-._1fuxi5m2-3-1-3._1fuxi5m2-3-1-3 {
+._1fuxi5m2-3-2-1._1fuxi5m2-3-2-1 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1fuxi5m3-3-1-3 {
+._1fuxi5m3-3-2-1 {
   grid-area: clear;
   grid-row-start: 1;
 }
-._1fuxi5m3-3-1-3._1fuxi5m3-3-1-3 {
+._1fuxi5m3-3-2-1._1fuxi5m3-3-2-1 {
   height: 100%;
   border-radius: 0 var(--dt-borders-radius-field-default, 6px) var(--dt-borders-radius-field-default, 6px) 0;
 }
-._1fuxi5m4-3-1-3 {
+._1fuxi5m4-3-2-1 {
   gap: 2px;
   width: 100%;
   grid-template-columns: 40% auto max-content;
 }
-._1fuxi5m5-3-1-3 {
+._1fuxi5m5-3-2-1 {
   grid-template-areas: "segment variables clear";
 }
-._1fuxi5m6-3-1-3 {
+._1fuxi5m6-3-2-1 {
   grid-template-areas: "segment variables";
   grid-template-columns: 40% auto;
 }
-._1fuxi5m7-3-1-3 {
+._1fuxi5m7-3-2-1 {
   grid-template-areas: "segment segment clear";
 }
-._1fuxi5m8-3-1-3 {
+._1fuxi5m8-3-2-1 {
   grid-template-areas: "segment segment";
 }
 @media screen and (min-width: 641px) {
-  ._1fuxi5m0-3-1-3 {
+  ._1fuxi5m0-3-2-1 {
     border-bottom-left-radius: 0;
   }
 }
 @media screen and (max-width: 640px) {
-  ._1fuxi5m1-3-1-3 {
+  ._1fuxi5m1-3-2-1 {
     border-bottom-left-radius: 0;
   }
-  ._1fuxi5m5-3-1-3 {
+  ._1fuxi5m5-3-2-1 {
     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-1-3";
-var noBorderRadiusRight = "_1fuxi5m2-3-1-3";
-var segmentsSelectCSS = "_1fuxi5m1-3-1-3";
-var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m4-3-1-3", variantClassNames: { layout: { full: "_1fuxi5m5-3-1-3", "full-readonly": "_1fuxi5m6-3-1-3", "no-variables": "_1fuxi5m7-3-1-3", "no-variables-readonly": "_1fuxi5m8-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var variablesSelectCSS = "_1fuxi5m0-3-1-3";
+var clearButtonCSS = "_1fuxi5m3-3-2-1";
+var noBorderRadiusRight = "_1fuxi5m2-3-2-1";
+var segmentsSelectCSS = "_1fuxi5m1-3-2-1";
+var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m4-3-2-1", variantClassNames: { layout: { full: "_1fuxi5m5-3-2-1", "full-readonly": "_1fuxi5m6-3-2-1", "no-variables": "_1fuxi5m7-3-2-1", "no-variables-readonly": "_1fuxi5m8-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
+var variablesSelectCSS = "_1fuxi5m0-3-2-1";
 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-1-3';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-1-3';\nexport var segmentsSelectCSS = '_1fuxi5m1-3-1-3';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m4-3-1-3',variantClassNames:{layout:{full:'_1fuxi5m5-3-1-3','full-readonly':'_1fuxi5m6-3-1-3','no-variables':'_1fuxi5m7-3-1-3','no-variables-readonly':'_1fuxi5m8-3-1-3'}},defaultVariants:{},compoundVariants:[]});\nexport var variablesSelectCSS = '_1fuxi5m0-3-1-3';"],
+  "sourcesContent": ["import './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m3-3-2-1';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-2-1';\nexport var segmentsSelectCSS = '_1fuxi5m1-3-2-1';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m4-3-2-1',variantClassNames:{layout:{full:'_1fuxi5m5-3-2-1','full-readonly':'_1fuxi5m6-3-2-1','no-variables':'_1fuxi5m7-3-2-1','no-variables-readonly':'_1fuxi5m8-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var variablesSelectCSS = '_1fuxi5m0-3-2-1';"],
   "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-1-3 {
+._1e5el1o0-3-2-1 {
   max-width: 400px;
 }

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

@@ -1,5 +1,5 @@
 import "./SegmentSelectorTrigger.css";
-var trigger = "_1e5el1o0-3-1-3";
+var trigger = "_1e5el1o0-3-2-1";
 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-1-3';"],
+  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-2-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/filters/segment-selector/parts/selectionBar/SelectionBar.js

@@ -221,6 +221,7 @@ const SelectionBar = (props) => {
                   "aria-label": intl.formatMessage(
                     SEGMENTSELECTOR_MESSAGES.removeSegmentButton
                   ),
+                  "data-dt-name": "Remove",
                   children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(XmarkIcon, {}) })
                 }
               )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SelectionBar.tsx"],
-  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { useContext, useRef, type RefObject } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\nimport type { FilterSegment } from '@dynatrace-sdk/client-query';\n\nimport {\n  clearButtonCSS,\n  noBorderRadiusRight,\n  segmentsSelectGridCSS,\n} from './SegmentSelect.sty.js';\nimport { SegmentSelect } from './SegmentSelect.js';\nimport { ValueSelect } from './ValueSelect.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { FormFieldMessages } from '../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n  type CachedSegment,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { getErrorKey } from '../../contexts/SegmentsUI/segmentValidationHelper.js';\nimport type { UISegment } from '../../contexts/SegmentsUI/UISegments.types.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\nimport * as listStyles from '../../SegmentSelector.sty.js';\n\ntype SelectionBarProps = {\n  availableSegments: CachedSegment['segment'][];\n  clearable?: boolean;\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  returnFocusTo: RefObject<null | HTMLButtonElement>;\n  segment?: CachedSegment;\n  uiSegment: UISegment;\n};\n\nfunction getVariables(segment: FilterSegment | undefined) {\n  if (segment?.variables && segment.variables.length > 0) {\n    return segment.variables[0].values;\n  }\n\n  return undefined;\n}\n\nfunction getLayout(hasVariables: boolean, hasClearButton: boolean) {\n  if (!hasVariables && !hasClearButton) {\n    return 'no-variables-readonly';\n  }\n\n  if (!hasVariables && hasClearButton) {\n    return 'no-variables';\n  }\n\n  if (hasVariables && !hasClearButton) {\n    return 'full-readonly';\n  }\n  return 'full';\n}\n\nfunction getErrorMessageFromKey(\n  errorKey:\n    | 'unavailable'\n    | 'needs-update'\n    | 'needs-variables'\n    | null\n    | undefined,\n) {\n  switch (errorKey) {\n    case 'unavailable':\n      return SEGMENTSELECTOR_MESSAGES.unavailableSegmentError;\n    case 'needs-update':\n      return SEGMENTSELECTOR_MESSAGES.removedVariablesError;\n    case 'needs-variables':\n      return SEGMENTSELECTOR_MESSAGES.valueMissingError;\n    default:\n      return null;\n  }\n}\n\n/**\n * Error messages for the SelectionBar component.\n * @internal\n */\nexport const ErrorMessages = ({ uiSegment }: { uiSegment: UISegment }) => {\n  const {\n    data: errorKey,\n    isLoading,\n    error,\n  } = useQuery(\n    {\n      queryKey: ['errorKey', uiSegment],\n      queryFn: () => getErrorKey(uiSegment),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const { arrayIdentifierErrorIds } = useContext(UISegmentsContext);\n  const hasArrayIdentifierError = arrayIdentifierErrorIds?.includes(\n    uiSegment.id,\n  );\n\n  if (segmentsClient.hasAccessRights === false || isLoading || error) {\n    return null;\n  }\n\n  const errorMessage = getErrorMessageFromKey(errorKey);\n\n  return (\n    <FormFieldMessages>\n      {(messages) => {\n        if (hasArrayIdentifierError) {\n          return (\n            <FormFieldMessages.Item\n              validityStateKey=\"customError\"\n              variant=\"error\"\n              key=\"array-identifier\"\n            >\n              <FormattedMessage\n                {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n              />\n            </FormFieldMessages.Item>\n          );\n        }\n\n        if (errorKey) {\n          return (\n            <FormFieldMessages.Item\n              validityStateKey=\"customError\"\n              variant=\"error\"\n              key={errorKey}\n            >\n              <FormattedMessage {...errorMessage} />\n            </FormFieldMessages.Item>\n          );\n        }\n\n        return messages.map((props) => {\n          // If it is valueMissing error from the variable select we show a custom error message.\n          if (\n            props.controlId !== uiSegment.id &&\n            props.validityStateKey === 'valueMissing'\n          ) {\n            return (\n              <FormFieldMessages.Item\n                key={`${props.controlId}-valueMissing`}\n                {...props}\n              >\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.valueMissingError}\n                />\n              </FormFieldMessages.Item>\n            );\n          }\n\n          return (\n            <FormFieldMessages.Item\n              key={`${props.controlId}-${props.validityStateKey}`}\n              {...props}\n            />\n          );\n        });\n      }}\n    </FormFieldMessages>\n  );\n};\n\n/**\n * SelectionBar component\n * @internal\n */\nexport const SelectionBar = (props: SelectionBarProps) => {\n  const {\n    availableSegments,\n    clearable,\n    readOnly,\n    autoFocus,\n    uiSegment,\n    returnFocusTo,\n    segment: propSegment,\n  } = props;\n  const intl = useIntl();\n  const gridRef = useRef<HTMLDivElement | null>(null);\n  const isPlaceholder = uiSegment.isPlaceholder ?? false;\n  const id = uiSegment.id;\n  const variables = getVariables(uiSegment);\n\n  const { removeUISegment } = useSegmentsUIContext();\n  const { state } = useFormFieldMessagesContext();\n  const { getSegment } = useSegmentsCache();\n\n  // If the segment was already fetched, we use the segment prop and don't fetch.\n  // However, private segments are not listed in the available segments\n  // and need to be fetched individually.\n  const { data: fetchedSegment } = useQuery<CachedSegment>(\n    {\n      queryKey: ['getSegment', id],\n      queryFn: () => getSegment(id),\n      enabled:\n        segmentsClient.hasAccessRights !== false &&\n        !isPlaceholder &&\n        propSegment === undefined,\n      retryOnMount: false,\n    },\n    segmentsClient.queryClient,\n  );\n\n  const segment = propSegment ?? fetchedSegment;\n\n  const showDeleteButton =\n    clearable && !readOnly && segmentsClient.hasAccessRights !== false;\n\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  return (\n    <li className={listStyles.segmentSelectorListItem}>\n      <Tooltip\n        text={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.unlistedSegmentTooltip,\n        )}\n        style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        disabled={!segment?.temporarilyApplied}\n      >\n        <Grid\n          ref={gridRef}\n          className={segmentsSelectGridCSS({\n            layout: getLayout(\n              !!segment?.segment?.variables,\n              !!showDeleteButton,\n            ),\n          })}\n        >\n          <SegmentSelect\n            readOnly={readOnly}\n            availableSegments={availableSegments}\n            segment={segment}\n            id={id}\n            overlayWidth={`${gridRef.current?.clientWidth}px`}\n            triggerClassName={clsx({\n              [noBorderRadiusRight]:\n                showDeleteButton || segment?.segment?.variables,\n            })}\n            isPlaceholder={isPlaceholder}\n            autoFocus={autoFocus}\n          />\n          {segment?.segment?.variables && (\n            <ValueSelect\n              readOnly={readOnly}\n              segment={segment}\n              variables={variables}\n              triggerClassName={clsx({\n                [noBorderRadiusRight]: clearable && !readOnly,\n              })}\n            />\n          )}\n          {showDeleteButton && (\n            <Button\n              onClick={() => {\n                removeUISegment(id);\n                returnFocusTo.current?.focus();\n              }}\n              color={state.showError ? 'critical' : 'neutral'}\n              variant=\"emphasized\"\n              className={clearButtonCSS}\n              aria-label={intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.removeSegmentButton,\n              )}\n            >\n              <Button.Prefix>\n                <XmarkIcon />\n              </Button.Prefix>\n            </Button>\n          )}\n        </Grid>\n      </Tooltip>\n\n      <ErrorMessages uiSegment={uiSegment} />\n    </li>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { useContext, useRef, type RefObject } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\nimport type { FilterSegment } from '@dynatrace-sdk/client-query';\n\nimport {\n  clearButtonCSS,\n  noBorderRadiusRight,\n  segmentsSelectGridCSS,\n} from './SegmentSelect.sty.js';\nimport { SegmentSelect } from './SegmentSelect.js';\nimport { ValueSelect } from './ValueSelect.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { FormFieldMessages } from '../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n  type CachedSegment,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { getErrorKey } from '../../contexts/SegmentsUI/segmentValidationHelper.js';\nimport type { UISegment } from '../../contexts/SegmentsUI/UISegments.types.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\nimport * as listStyles from '../../SegmentSelector.sty.js';\n\ntype SelectionBarProps = {\n  availableSegments: CachedSegment['segment'][];\n  clearable?: boolean;\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  returnFocusTo: RefObject<null | HTMLButtonElement>;\n  segment?: CachedSegment;\n  uiSegment: UISegment;\n};\n\nfunction getVariables(segment: FilterSegment | undefined) {\n  if (segment?.variables && segment.variables.length > 0) {\n    return segment.variables[0].values;\n  }\n\n  return undefined;\n}\n\nfunction getLayout(hasVariables: boolean, hasClearButton: boolean) {\n  if (!hasVariables && !hasClearButton) {\n    return 'no-variables-readonly';\n  }\n\n  if (!hasVariables && hasClearButton) {\n    return 'no-variables';\n  }\n\n  if (hasVariables && !hasClearButton) {\n    return 'full-readonly';\n  }\n  return 'full';\n}\n\nfunction getErrorMessageFromKey(\n  errorKey:\n    | 'unavailable'\n    | 'needs-update'\n    | 'needs-variables'\n    | null\n    | undefined,\n) {\n  switch (errorKey) {\n    case 'unavailable':\n      return SEGMENTSELECTOR_MESSAGES.unavailableSegmentError;\n    case 'needs-update':\n      return SEGMENTSELECTOR_MESSAGES.removedVariablesError;\n    case 'needs-variables':\n      return SEGMENTSELECTOR_MESSAGES.valueMissingError;\n    default:\n      return null;\n  }\n}\n\n/**\n * Error messages for the SelectionBar component.\n * @internal\n */\nexport const ErrorMessages = ({ uiSegment }: { uiSegment: UISegment }) => {\n  const {\n    data: errorKey,\n    isLoading,\n    error,\n  } = useQuery(\n    {\n      queryKey: ['errorKey', uiSegment],\n      queryFn: () => getErrorKey(uiSegment),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const { arrayIdentifierErrorIds } = useContext(UISegmentsContext);\n  const hasArrayIdentifierError = arrayIdentifierErrorIds?.includes(\n    uiSegment.id,\n  );\n\n  if (segmentsClient.hasAccessRights === false || isLoading || error) {\n    return null;\n  }\n\n  const errorMessage = getErrorMessageFromKey(errorKey);\n\n  return (\n    <FormFieldMessages>\n      {(messages) => {\n        if (hasArrayIdentifierError) {\n          return (\n            <FormFieldMessages.Item\n              validityStateKey=\"customError\"\n              variant=\"error\"\n              key=\"array-identifier\"\n            >\n              <FormattedMessage\n                {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n              />\n            </FormFieldMessages.Item>\n          );\n        }\n\n        if (errorKey) {\n          return (\n            <FormFieldMessages.Item\n              validityStateKey=\"customError\"\n              variant=\"error\"\n              key={errorKey}\n            >\n              <FormattedMessage {...errorMessage} />\n            </FormFieldMessages.Item>\n          );\n        }\n\n        return messages.map((props) => {\n          // If it is valueMissing error from the variable select we show a custom error message.\n          if (\n            props.controlId !== uiSegment.id &&\n            props.validityStateKey === 'valueMissing'\n          ) {\n            return (\n              <FormFieldMessages.Item\n                key={`${props.controlId}-valueMissing`}\n                {...props}\n              >\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.valueMissingError}\n                />\n              </FormFieldMessages.Item>\n            );\n          }\n\n          return (\n            <FormFieldMessages.Item\n              key={`${props.controlId}-${props.validityStateKey}`}\n              {...props}\n            />\n          );\n        });\n      }}\n    </FormFieldMessages>\n  );\n};\n\n/**\n * SelectionBar component\n * @internal\n */\nexport const SelectionBar = (props: SelectionBarProps) => {\n  const {\n    availableSegments,\n    clearable,\n    readOnly,\n    autoFocus,\n    uiSegment,\n    returnFocusTo,\n    segment: propSegment,\n  } = props;\n  const intl = useIntl();\n  const gridRef = useRef<HTMLDivElement | null>(null);\n  const isPlaceholder = uiSegment.isPlaceholder ?? false;\n  const id = uiSegment.id;\n  const variables = getVariables(uiSegment);\n\n  const { removeUISegment } = useSegmentsUIContext();\n  const { state } = useFormFieldMessagesContext();\n  const { getSegment } = useSegmentsCache();\n\n  // If the segment was already fetched, we use the segment prop and don't fetch.\n  // However, private segments are not listed in the available segments\n  // and need to be fetched individually.\n  const { data: fetchedSegment } = useQuery<CachedSegment>(\n    {\n      queryKey: ['getSegment', id],\n      queryFn: () => getSegment(id),\n      enabled:\n        segmentsClient.hasAccessRights !== false &&\n        !isPlaceholder &&\n        propSegment === undefined,\n      retryOnMount: false,\n    },\n    segmentsClient.queryClient,\n  );\n\n  const segment = propSegment ?? fetchedSegment;\n\n  const showDeleteButton =\n    clearable && !readOnly && segmentsClient.hasAccessRights !== false;\n\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  return (\n    <li className={listStyles.segmentSelectorListItem}>\n      <Tooltip\n        text={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.unlistedSegmentTooltip,\n        )}\n        style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        disabled={!segment?.temporarilyApplied}\n      >\n        <Grid\n          ref={gridRef}\n          className={segmentsSelectGridCSS({\n            layout: getLayout(\n              !!segment?.segment?.variables,\n              !!showDeleteButton,\n            ),\n          })}\n        >\n          <SegmentSelect\n            readOnly={readOnly}\n            availableSegments={availableSegments}\n            segment={segment}\n            id={id}\n            overlayWidth={`${gridRef.current?.clientWidth}px`}\n            triggerClassName={clsx({\n              [noBorderRadiusRight]:\n                showDeleteButton || segment?.segment?.variables,\n            })}\n            isPlaceholder={isPlaceholder}\n            autoFocus={autoFocus}\n          />\n          {segment?.segment?.variables && (\n            <ValueSelect\n              readOnly={readOnly}\n              segment={segment}\n              variables={variables}\n              triggerClassName={clsx({\n                [noBorderRadiusRight]: clearable && !readOnly,\n              })}\n            />\n          )}\n          {showDeleteButton && (\n            <Button\n              onClick={() => {\n                removeUISegment(id);\n                returnFocusTo.current?.focus();\n              }}\n              color={state.showError ? 'critical' : 'neutral'}\n              variant=\"emphasized\"\n              className={clearButtonCSS}\n              aria-label={intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.removeSegmentButton,\n              )}\n              data-dt-name=\"Remove\"\n            >\n              <Button.Prefix>\n                <XmarkIcon />\n              </Button.Prefix>\n            </Button>\n          )}\n        </Grid>\n      </Tooltip>\n\n      <ErrorMessages uiSegment={uiSegment} />\n    </li>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1sqhmjg0-3-1-3 {
+._1sqhmjg0-3-2-1 {
   min-width: 0;
   box-sizing: border-box;
 }

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

@@ -1,5 +1,5 @@
 import "./TimeframeSelector.css";
-var displayValueParts = "_1sqhmjg0-3-1-3";
+var displayValueParts = "_1sqhmjg0-3-2-1";
 export {
   displayValueParts
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/timeframe-selector/TimeframeSelector.css.ts"],
-  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-1-3';"],
+  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-2-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.css

@@ -1,4 +1,4 @@
-._at2xro0-3-1-3 {
+._at2xro0-3-2-1 {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -7,7 +7,7 @@
   padding: var(--dt-spacings-size-0, 0);
   border: var(--dt-spacings-size-0, 0);
 }
-._at2xro1-3-1-3 {
+._at2xro1-3-2-1 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-top: var(--dt-spacings-size-8, 8px);
@@ -18,14 +18,14 @@
   width: 100%;
   flex-direction: column;
 }
-._at2xro2-3-1-3 {
+._at2xro2-3-2-1 {
   flex-direction: column;
   flex: 1;
   min-width: var(--dt-spacings-size-0, 0);
   gap: var(--dt-spacings-size-4, 4px);
 }
 @media screen and (min-width: 640px) {
-  ._at2xro1-3-1-3 {
+  ._at2xro1-3-2-1 {
     flex-direction: row;
   }
 }

package/esm/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.js

@@ -65,6 +65,7 @@ const CustomTimeframeSelector = () => {
     showError: false,
     isTouched: false
   });
+  const applyButtonDataDtName = "Apply";
   const handleApply = useCallback(() => {
     if (!state.isValid) {
       return;
@@ -220,6 +221,7 @@ const CustomTimeframeSelector = () => {
                     borderTopLeftRadius: 0,
                     borderBottomLeftRadius: 0
                   },
+                  "data-dt-name": applyButtonDataDtName,
                   children: intl.formatMessage(
                     TIMEFRAME_SELECTOR_MESSAGES.applyButton
                   )
@@ -239,6 +241,7 @@ const CustomTimeframeSelector = () => {
         type: "submit",
         style: { alignSelf: "end" },
         onClick: handleApply,
+        "data-dt-name": applyButtonDataDtName,
         children: intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.applyButton)
       }
     )

package/esm/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.tsx"],
-  "sourcesContent": ["import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport BreakpointsJS from '@dynatrace/strato-design-tokens/breakpoints-js';\n\nimport * as customTimeframeSelectorStyles from './CustomTimeframeSelector.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { DateTimeRangePicker } from '../../../../forms/date-time-range-picker/DateTimeRangePicker.js';\nimport type {\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from '../../../../forms/date-time-range-picker/types.js';\nimport { FormFieldMessages } from '../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js';\nimport { Label } from '../../../../forms/forms-core/components/label/Label.js';\nimport { _FormFieldContext as FormFieldContext } from '../../../../forms/forms-core/contexts/FormFieldContext.js';\nimport { FormFieldMessageContext } from '../../../../forms/forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldContext } from '../../../../forms/forms-core/hooks/useFormFieldContext.js';\nimport {\n  FormFieldMessagesAction,\n  formFieldMessagesReducer,\n  type FormFieldMessagesReducerAction,\n} from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  filterOutGrailLimit,\n  sortTimeframeValues,\n} from '../../../../forms/forms-core/time/helpers.js';\nimport {\n  getOutsideRangeMessage,\n  parseValue,\n} from '../../../../forms/forms-core/time/timeParser.js';\nimport type { FormFieldMessageContextState } from '../../../../forms/forms-core/types/formfield-messages.types.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useBreakpoint } from '../../../../layouts/hooks/useBreakpoint.js';\nimport { InputGroup } from '../../../../layouts/input-group/InputGroup.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport { useInternalTimeframeSelectorContext } from '../../hooks/useInternalTimeframeSelectorContext.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\nimport { saveRecentTimeframe } from '../../utils/presets-helpers.js';\nimport { isOutsideRange } from '../../utils/timeframe-selection.js';\n\n/**\n * Custom Timeframe Selector component used inside the overlay.\n */\nexport const CustomTimeframeSelector = () => {\n  const ref = useRef<DateTimeRangePickerRef | null>(null);\n  const intl = useIntl();\n  const { details, onChange } = useTimeframeSelectorContext();\n  const { min, max, showError, precision, required } =\n    useInternalTimeframeSelectorContext();\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const dateTimeRangePickerId = useId();\n\n  const hintId = useId();\n\n  const labelId = useId();\n\n  const { from, to } = parseValue(details);\n  const [timeframe, setTimeframe] = useState<DateTimeRangePickerProps['value']>(\n    from && to\n      ? {\n          from,\n          to,\n        }\n      : null,\n  );\n\n  const { required: contextRequired } = useFormFieldContext();\n\n  const callback = useCallback(\n    (\n      state: FormFieldMessageContextState,\n      action: FormFieldMessagesReducerAction,\n    ) => formFieldMessagesReducer(state, action),\n    [dateTimeRangePickerId],\n  );\n\n  const [state, dispatch] = useReducer(callback, {\n    customMessages: [],\n    formControlMessages: [],\n    showError: false,\n    isTouched: false,\n  });\n\n  /** Handle form submission. */\n  const handleApply = useCallback(() => {\n    if (!state.isValid) {\n      return;\n    }\n\n    const currentValue = ref.current?.getCurrentValue();\n    const refFrom = currentValue?.from?.value;\n    const refTo = currentValue?.to?.value;\n\n    let currentTimeframe = timeframe;\n\n    const onlyFromIsEmpty = !refFrom && !!refTo && refTo !== 'now()';\n    const onlyToIsEmpty = !refTo && !!refFrom && refFrom !== 'now()';\n\n    if (onlyFromIsEmpty || onlyToIsEmpty) {\n      // If one of the fields is empty, fill it with 'Now'\n      const from = ref.current?.inputRef.from?.value || 'now()';\n      const to = ref.current?.inputRef.to?.value || 'now()';\n      const parsedTimeframe = parseValue({ from, to }, false, precision);\n\n      if (parsedTimeframe.from && parsedTimeframe.to) {\n        // Exit if the parsed timeframe is out of bounds\n        if (\n          isOutsideRange(\n            {\n              from: parsedTimeframe.from.value,\n              to: parsedTimeframe.to.value,\n            },\n            min,\n            max,\n          )\n        ) {\n          return;\n        }\n\n        const sortedTimeframe = sortTimeframeValues({\n          from: parsedTimeframe.from,\n          to: parsedTimeframe.to,\n        });\n\n        if (sortedTimeframe.from && sortedTimeframe.to) {\n          currentTimeframe = {\n            from: sortedTimeframe.from,\n            to: sortedTimeframe.to,\n          };\n        }\n      }\n    }\n\n    /** parse date-picker inputs to have latest expression values on form submission */\n    const { from, to } = currentTimeframe\n      ? parseValue(currentTimeframe, false, precision)\n      : { from: null, to: null };\n\n    if (from && to) {\n      const timeframe = { from, to };\n      onChange(timeframe);\n      saveRecentTimeframe(timeframe);\n      return;\n    }\n\n    if (!required && !contextRequired) {\n      onChange(null);\n    }\n  }, [\n    timeframe,\n    state.isValid,\n    precision,\n    required,\n    contextRequired,\n    min,\n    max,\n    onChange,\n  ]);\n\n  const handleKeyDown = useCallback(\n    (e: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (\n        e.key !== 'Enter' ||\n        // Checks if the event target is a child of the DateTimeRangePicker root element ref.\n        !ref.current?.element?.contains(e.target as HTMLElement)\n      ) {\n        return;\n      }\n\n      ref.current?.validate();\n      handleApply();\n    },\n    [handleApply],\n  );\n\n  const isScreenLargerThanMobile = useBreakpoint(\n    `(min-width: ${BreakpointsJS.Max.Mobile}px)`,\n    true,\n  );\n\n  // We want to initially show errors once the overlay is opened.\n  useEffect(() => {\n    if (showError) {\n      ref.current?.validate();\n    }\n  }, [showError]);\n\n  useEffect(() => {\n    const timeframe = { from: from?.value, to: to?.value };\n    // The default min or max is set according to the Grail min or max and shouldn't show in the info message, so we treat it as if it is never set.\n    const tempMin = filterOutGrailLimit(timeframe, min);\n    const tempMax = filterOutGrailLimit(timeframe, max);\n\n    if (!tempMin && !tempMax) {\n      dispatch({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: hintId,\n          messageType: 'formcontrol',\n        },\n      });\n      return;\n    }\n\n    dispatch({\n      type: FormFieldMessagesAction.ADDMESSAGE,\n      payload: {\n        id: hintId,\n        variant: 'hint',\n        message: getOutsideRangeMessage(intl, tempMin, tempMax, precision),\n        messageType: 'formcontrol',\n        validityStateKey: 'customError',\n      },\n    });\n  }, [min, max, dispatch, intl, precision, hintId, from?.value, to?.value]);\n\n  const messageContextValue = useMemo(\n    () => ({\n      dispatch,\n      state,\n    }),\n    [dispatch, state],\n  );\n\n  return (\n    <div ref={rootRef} className={customTimeframeSelectorStyles.overlayRoot}>\n      <FormFieldMessageContext.Provider value={messageContextValue}>\n        <Flex className={customTimeframeSelectorStyles.wrapper}>\n          <div onKeyDown={handleKeyDown}>\n            {/* The context needs to be cleared so that the controlId doesn't get updated;\n          otherwise, the TimeframeSelector trigger would get the dateTimeRangePickerId\n          and clicking on the FormField label wouldn't focus it */}\n            {\n              // TODO: check if we can remove htmlFor here and pass in the controlId to the context\n            }\n            <FormFieldContext.Provider value={{}}>\n              <fieldset\n                className={customTimeframeSelectorStyles.fieldset}\n                aria-labelledby={labelId}\n              >\n                <Label\n                  htmlFor={dateTimeRangePickerId}\n                  required={required || contextRequired}\n                  id={labelId}\n                >\n                  {intl.formatMessage(\n                    TIMEFRAME_SELECTOR_MESSAGES.timeframeLabel,\n                  )}\n                </Label>\n                <InputGroup style={{ gridAutoColumns: '1fr auto' }}>\n                  <DateTimeRangePicker\n                    ref={ref}\n                    id={dateTimeRangePickerId}\n                    required={required || contextRequired}\n                    min={min}\n                    max={max}\n                    precision={precision}\n                    value={timeframe}\n                    onChange={setTimeframe}\n                    style={{ gridTemplateColumns: '1fr auto' }}\n                  />\n                  {isScreenLargerThanMobile && (\n                    <Button\n                      color=\"primary\"\n                      variant=\"accent\"\n                      type=\"submit\"\n                      onClick={handleApply}\n                      style={{\n                        alignSelf: 'end',\n                        borderTopLeftRadius: 0,\n                        borderBottomLeftRadius: 0,\n                      }}\n                    >\n                      {intl.formatMessage(\n                        TIMEFRAME_SELECTOR_MESSAGES.applyButton,\n                      )}\n                    </Button>\n                  )}\n                </InputGroup>\n              </fieldset>\n            </FormFieldContext.Provider>\n          </div>\n          <FormFieldMessages />\n        </Flex>\n        {!isScreenLargerThanMobile && (\n          <Button\n            color=\"primary\"\n            variant=\"accent\"\n            type=\"submit\"\n            style={{ alignSelf: 'end' }}\n            onClick={handleApply}\n          >\n            {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.applyButton)}\n          </Button>\n        )}\n      </FormFieldMessageContext.Provider>\n    </div>\n  );\n};\n\nCustomTimeframeSelector['displayName'] = 'CustomTimeframeSelector';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport BreakpointsJS from '@dynatrace/strato-design-tokens/breakpoints-js';\n\nimport * as customTimeframeSelectorStyles from './CustomTimeframeSelector.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { DateTimeRangePicker } from '../../../../forms/date-time-range-picker/DateTimeRangePicker.js';\nimport type {\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from '../../../../forms/date-time-range-picker/types.js';\nimport { FormFieldMessages } from '../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js';\nimport { Label } from '../../../../forms/forms-core/components/label/Label.js';\nimport { _FormFieldContext as FormFieldContext } from '../../../../forms/forms-core/contexts/FormFieldContext.js';\nimport { FormFieldMessageContext } from '../../../../forms/forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldContext } from '../../../../forms/forms-core/hooks/useFormFieldContext.js';\nimport {\n  FormFieldMessagesAction,\n  formFieldMessagesReducer,\n  type FormFieldMessagesReducerAction,\n} from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  filterOutGrailLimit,\n  sortTimeframeValues,\n} from '../../../../forms/forms-core/time/helpers.js';\nimport {\n  getOutsideRangeMessage,\n  parseValue,\n} from '../../../../forms/forms-core/time/timeParser.js';\nimport type { FormFieldMessageContextState } from '../../../../forms/forms-core/types/formfield-messages.types.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useBreakpoint } from '../../../../layouts/hooks/useBreakpoint.js';\nimport { InputGroup } from '../../../../layouts/input-group/InputGroup.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport { useInternalTimeframeSelectorContext } from '../../hooks/useInternalTimeframeSelectorContext.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\nimport { saveRecentTimeframe } from '../../utils/presets-helpers.js';\nimport { isOutsideRange } from '../../utils/timeframe-selection.js';\n\n/**\n * Custom Timeframe Selector component used inside the overlay.\n */\nexport const CustomTimeframeSelector = () => {\n  const ref = useRef<DateTimeRangePickerRef | null>(null);\n  const intl = useIntl();\n  const { details, onChange } = useTimeframeSelectorContext();\n  const { min, max, showError, precision, required } =\n    useInternalTimeframeSelectorContext();\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const dateTimeRangePickerId = useId();\n\n  const hintId = useId();\n\n  const labelId = useId();\n\n  const { from, to } = parseValue(details);\n  const [timeframe, setTimeframe] = useState<DateTimeRangePickerProps['value']>(\n    from && to\n      ? {\n          from,\n          to,\n        }\n      : null,\n  );\n\n  const { required: contextRequired } = useFormFieldContext();\n\n  const callback = useCallback(\n    (\n      state: FormFieldMessageContextState,\n      action: FormFieldMessagesReducerAction,\n    ) => formFieldMessagesReducer(state, action),\n    [dateTimeRangePickerId],\n  );\n\n  const [state, dispatch] = useReducer(callback, {\n    customMessages: [],\n    formControlMessages: [],\n    showError: false,\n    isTouched: false,\n  });\n\n  const applyButtonDataDtName = 'Apply';\n\n  /** Handle form submission. */\n  const handleApply = useCallback(() => {\n    if (!state.isValid) {\n      return;\n    }\n\n    const currentValue = ref.current?.getCurrentValue();\n    const refFrom = currentValue?.from?.value;\n    const refTo = currentValue?.to?.value;\n\n    let currentTimeframe = timeframe;\n\n    const onlyFromIsEmpty = !refFrom && !!refTo && refTo !== 'now()';\n    const onlyToIsEmpty = !refTo && !!refFrom && refFrom !== 'now()';\n\n    if (onlyFromIsEmpty || onlyToIsEmpty) {\n      // If one of the fields is empty, fill it with 'Now'\n      const from = ref.current?.inputRef.from?.value || 'now()';\n      const to = ref.current?.inputRef.to?.value || 'now()';\n      const parsedTimeframe = parseValue({ from, to }, false, precision);\n\n      if (parsedTimeframe.from && parsedTimeframe.to) {\n        // Exit if the parsed timeframe is out of bounds\n        if (\n          isOutsideRange(\n            {\n              from: parsedTimeframe.from.value,\n              to: parsedTimeframe.to.value,\n            },\n            min,\n            max,\n          )\n        ) {\n          return;\n        }\n\n        const sortedTimeframe = sortTimeframeValues({\n          from: parsedTimeframe.from,\n          to: parsedTimeframe.to,\n        });\n\n        if (sortedTimeframe.from && sortedTimeframe.to) {\n          currentTimeframe = {\n            from: sortedTimeframe.from,\n            to: sortedTimeframe.to,\n          };\n        }\n      }\n    }\n\n    /** parse date-picker inputs to have latest expression values on form submission */\n    const { from, to } = currentTimeframe\n      ? parseValue(currentTimeframe, false, precision)\n      : { from: null, to: null };\n\n    if (from && to) {\n      const timeframe = { from, to };\n      onChange(timeframe);\n      saveRecentTimeframe(timeframe);\n      return;\n    }\n\n    if (!required && !contextRequired) {\n      onChange(null);\n    }\n  }, [\n    timeframe,\n    state.isValid,\n    precision,\n    required,\n    contextRequired,\n    min,\n    max,\n    onChange,\n  ]);\n\n  const handleKeyDown = useCallback(\n    (e: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (\n        e.key !== 'Enter' ||\n        // Checks if the event target is a child of the DateTimeRangePicker root element ref.\n        !ref.current?.element?.contains(e.target as HTMLElement)\n      ) {\n        return;\n      }\n\n      ref.current?.validate();\n      handleApply();\n    },\n    [handleApply],\n  );\n\n  const isScreenLargerThanMobile = useBreakpoint(\n    `(min-width: ${BreakpointsJS.Max.Mobile}px)`,\n    true,\n  );\n\n  // We want to initially show errors once the overlay is opened.\n  useEffect(() => {\n    if (showError) {\n      ref.current?.validate();\n    }\n  }, [showError]);\n\n  useEffect(() => {\n    const timeframe = { from: from?.value, to: to?.value };\n    // The default min or max is set according to the Grail min or max and shouldn't show in the info message, so we treat it as if it is never set.\n    const tempMin = filterOutGrailLimit(timeframe, min);\n    const tempMax = filterOutGrailLimit(timeframe, max);\n\n    if (!tempMin && !tempMax) {\n      dispatch({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: hintId,\n          messageType: 'formcontrol',\n        },\n      });\n      return;\n    }\n\n    dispatch({\n      type: FormFieldMessagesAction.ADDMESSAGE,\n      payload: {\n        id: hintId,\n        variant: 'hint',\n        message: getOutsideRangeMessage(intl, tempMin, tempMax, precision),\n        messageType: 'formcontrol',\n        validityStateKey: 'customError',\n      },\n    });\n  }, [min, max, dispatch, intl, precision, hintId, from?.value, to?.value]);\n\n  const messageContextValue = useMemo(\n    () => ({\n      dispatch,\n      state,\n    }),\n    [dispatch, state],\n  );\n\n  return (\n    <div ref={rootRef} className={customTimeframeSelectorStyles.overlayRoot}>\n      <FormFieldMessageContext.Provider value={messageContextValue}>\n        <Flex className={customTimeframeSelectorStyles.wrapper}>\n          <div onKeyDown={handleKeyDown}>\n            {/* The context needs to be cleared so that the controlId doesn't get updated;\n          otherwise, the TimeframeSelector trigger would get the dateTimeRangePickerId\n          and clicking on the FormField label wouldn't focus it */}\n            {\n              // TODO: check if we can remove htmlFor here and pass in the controlId to the context\n            }\n            <FormFieldContext.Provider value={{}}>\n              <fieldset\n                className={customTimeframeSelectorStyles.fieldset}\n                aria-labelledby={labelId}\n              >\n                <Label\n                  htmlFor={dateTimeRangePickerId}\n                  required={required || contextRequired}\n                  id={labelId}\n                >\n                  {intl.formatMessage(\n                    TIMEFRAME_SELECTOR_MESSAGES.timeframeLabel,\n                  )}\n                </Label>\n                <InputGroup style={{ gridAutoColumns: '1fr auto' }}>\n                  <DateTimeRangePicker\n                    ref={ref}\n                    id={dateTimeRangePickerId}\n                    required={required || contextRequired}\n                    min={min}\n                    max={max}\n                    precision={precision}\n                    value={timeframe}\n                    onChange={setTimeframe}\n                    style={{ gridTemplateColumns: '1fr auto' }}\n                  />\n                  {isScreenLargerThanMobile && (\n                    <Button\n                      color=\"primary\"\n                      variant=\"accent\"\n                      type=\"submit\"\n                      onClick={handleApply}\n                      style={{\n                        alignSelf: 'end',\n                        borderTopLeftRadius: 0,\n                        borderBottomLeftRadius: 0,\n                      }}\n                      data-dt-name={applyButtonDataDtName}\n                    >\n                      {intl.formatMessage(\n                        TIMEFRAME_SELECTOR_MESSAGES.applyButton,\n                      )}\n                    </Button>\n                  )}\n                </InputGroup>\n              </fieldset>\n            </FormFieldContext.Provider>\n          </div>\n          <FormFieldMessages />\n        </Flex>\n        {!isScreenLargerThanMobile && (\n          <Button\n            color=\"primary\"\n            variant=\"accent\"\n            type=\"submit\"\n            style={{ alignSelf: 'end' }}\n            onClick={handleApply}\n            data-dt-name={applyButtonDataDtName}\n          >\n            {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.applyButton)}\n          </Button>\n        )}\n      </FormFieldMessageContext.Provider>\n    </div>\n  );\n};\n\nCustomTimeframeSelector['displayName'] = 'CustomTimeframeSelector';\n"],
+  "mappings": "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",
   "names": ["state", "from", "to", "timeframe"]
 }

package/esm/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.sty.js

@@ -1,7 +1,7 @@
 import "./CustomTimeframeSelector.css";
-var fieldset = "_at2xro0-3-1-3";
-var overlayRoot = "_at2xro1-3-1-3";
-var wrapper = "_at2xro2-3-1-3";
+var fieldset = "_at2xro0-3-2-1";
+var overlayRoot = "_at2xro1-3-2-1";
+var wrapper = "_at2xro2-3-2-1";
 export {
   fieldset,
   overlayRoot,

package/esm/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.css.ts"],
-  "sourcesContent": ["import './CustomTimeframeSelector.css';\nexport var fieldset = '_at2xro0-3-1-3';\nexport var overlayRoot = '_at2xro1-3-1-3';\nexport var wrapper = '_at2xro2-3-1-3';"],
+  "sourcesContent": ["import './CustomTimeframeSelector.css';\nexport var fieldset = '_at2xro0-3-2-1';\nexport var overlayRoot = '_at2xro1-3-2-1';\nexport var wrapper = '_at2xro2-3-2-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,cAAc;AAClB,IAAI,UAAU;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._14xc6b0-3-1-3 {
+._14xc6b0-3-2-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-surface-subdued, 9px);
@@ -9,18 +9,18 @@
   min-height: 0;
   max-width: 100vw;
 }
-._14xc6b1-3-1-3 {
+._14xc6b1-3-2-1 {
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
 }
-._14xc6b2-3-1-3 {
+._14xc6b2-3-2-1 {
   box-sizing: border-box;
   min-width: 0;
   width: 100%;
   padding: var(--dt-spacings-size-6, 6px);
 }
-._14xc6b3-3-1-3 {
+._14xc6b3-3-2-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);

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

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

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

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

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

@@ -72,6 +72,7 @@ const TimeframeSelectorOverlayFooter = (props) => {
                     href: "https://dt-url.net/timeframe-selector",
                     textStyle: "small",
                     style: { paddingRight: Spacings.Size6 },
+                    "data-dt-name": "LearnMore",
                     children: intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.docsLinkText)
                   }
                 )