@dynatrace/strato-components 3.10.4 → 3.11.0

package/esm/filters/segment-selector/hooks/useTriggerProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/segment-selector/hooks/useTriggerProps.tsx"],
-  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { useSegments } from './useSegments.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n} from '../contexts/SegmentsCache/SegmentsCache.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../segmentMessages.js';\nimport type { SegmentSelectorProps } from '../SegmentSelector.types.js';\nimport { getReadableValue } from '../utils.js';\n\n/**\n * Gets the display value props for showing the text or loading state, as well as aria props.\n * @internal\n */\nexport function useTriggerProps(\n  variant: SegmentSelectorProps['variant'],\n  remainingProps: SegmentSelectorProps,\n) {\n  const intl = useIntl();\n  const { segments } = useSegments();\n  const { getSegment } = useSegmentsCache();\n  const safeId = segments[0] ? segments[0].id : undefined;\n  const shouldFetchText =\n    variant !== 'compact' && segments.length === 1 && safeId !== undefined;\n\n  const { data, isLoading } = useQuery(\n    {\n      queryKey: ['getSegment', safeId, shouldFetchText],\n      queryFn: () => getSegment(safeId),\n      enabled: shouldFetchText,\n    },\n    segmentsClient.queryClient,\n  );\n\n  const text = useMemo(() => {\n    if (segments.length === 0 || !safeId) {\n      return null;\n    }\n\n    if (variant === 'compact') {\n      return `${segments.length}`;\n    }\n\n    if (segments.length > 1) {\n      return intl.formatMessage(\n        {\n          defaultMessage: '{length} segments',\n          id: '7vkTbyAZNeY/qa9p',\n          description:\n            'Text for SegmentSelector Trigger when multiple segments are selected.',\n        },\n        {\n          length: segments.length,\n        },\n      );\n    }\n\n    if (!data) {\n      return `${safeId}`;\n    }\n\n    const amountOfVariables = segments[0]?.variables?.[0]?.values?.length ?? 0;\n\n    if (amountOfVariables === 1) {\n      return `${data.segment.name}: ${getReadableValue(\n        segments[0].variables?.[0].values[0],\n        intl,\n      )}`;\n    }\n\n    if (amountOfVariables > 1) {\n      return `${data.segment.name} (${amountOfVariables})`;\n    }\n\n    return `${data.segment.name}`;\n  }, [data, intl, safeId, segments, variant]);\n\n  const ariaLabelingProps = _useAriaLabelingProps(remainingProps);\n\n  const ariaLabel = useMemo(() => {\n    const ariaLabelProp = ariaLabelingProps['aria-label'];\n\n    if (\n      ariaLabelProp === undefined &&\n      ariaLabelingProps['aria-labelledby'] === undefined\n    ) {\n      return text\n        ? undefined\n        : intl.formatMessage(SEGMENTSELECTOR_MESSAGES.defaultAriaLabel);\n    }\n\n    const combinedAriaLabel = text\n      ? ariaLabelProp?.concat(', ', text)\n      : ariaLabelProp;\n\n    return combinedAriaLabel;\n  }, [ariaLabelingProps, intl, text]);\n\n  const ariaProps = {\n    ...ariaLabelingProps,\n    'aria-label': ariaLabel,\n    'aria-disabled': remainingProps['aria-disabled'],\n  };\n\n  return { isLoading: shouldFetchText ? isLoading : false, text, ariaProps };\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB,6BAA6B;AAC9D;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAEzC,SAAS,wBAAwB;AAM1B,SAAS,gBACd,SACA,gBACA;AACA,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,SAAS,IAAI,YAAY;AACjC,QAAM,EAAE,WAAW,IAAI,iBAAiB;AACxC,QAAM,SAAS,SAAS,CAAC,IAAI,SAAS,CAAC,EAAE,KAAK;AAC9C,QAAM,kBACJ,YAAY,aAAa,SAAS,WAAW,KAAK,WAAW;AAE/D,QAAM,EAAE,MAAM,UAAU,IAAI;AAAA,IAC1B;AAAA,MACE,UAAU,CAAC,cAAc,QAAQ,eAAe;AAAA,MAChD,SAAS,MAAM,WAAW,MAAM;AAAA,MAChC,SAAS;AAAA,IACX;AAAA,IACA,eAAe;AAAA,EACjB;AAEA,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,SAAS,WAAW,KAAK,CAAC,QAAQ;AACpC,aAAO;AAAA,IACT;AAEA,QAAI,YAAY,WAAW;AACzB,aAAO,GAAG,SAAS,MAAM;AAAA,IAC3B;AAEA,QAAI,SAAS,SAAS,GAAG;AACvB,aAAO,KAAK;AAAA,QACV;AAAA,UACE,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aACE;AAAA,QACJ;AAAA,QACA;AAAA,UACE,QAAQ,SAAS;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAEA,QAAI,CAAC,MAAM;AACT,aAAO,GAAG,MAAM;AAAA,IAClB;AAEA,UAAM,oBAAoB,SAAS,CAAC,GAAG,YAAY,CAAC,GAAG,QAAQ,UAAU;AAEzE,QAAI,sBAAsB,GAAG;AAC3B,aAAO,GAAG,KAAK,QAAQ,IAAI,KAAK;AAAA,QAC9B,SAAS,CAAC,EAAE,YAAY,CAAC,EAAE,OAAO,CAAC;AAAA,QACnC;AAAA,MACF,CAAC;AAAA,IACH;AAEA,QAAI,oBAAoB,GAAG;AACzB,aAAO,GAAG,KAAK,QAAQ,IAAI,KAAK,iBAAiB;AAAA,IACnD;AAEA,WAAO,GAAG,KAAK,QAAQ,IAAI;AAAA,EAC7B,GAAG,CAAC,MAAM,MAAM,QAAQ,UAAU,OAAO,CAAC;AAE1C,QAAM,oBAAoB,sBAAsB,cAAc;AAE9D,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,gBAAgB,kBAAkB,YAAY;AAEpD,QACE,kBAAkB,UAClB,kBAAkB,iBAAiB,MAAM,QACzC;AACA,aAAO,OACH,SACA,KAAK,cAAc,yBAAyB,gBAAgB;AAAA,IAClE;AAEA,UAAM,oBAAoB,OACtB,eAAe,OAAO,MAAM,IAAI,IAChC;AAEJ,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,MAAM,IAAI,CAAC;AAElC,QAAM,YAAY;AAAA,IAChB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,iBAAiB,eAAe,eAAe;AAAA,EACjD;AAEA,SAAO,EAAE,WAAW,kBAAkB,YAAY,OAAO,MAAM,UAAU;AAC3E;",
+  "sourcesContent": ["import { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { useSegments } from './useSegments.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n} from '../contexts/SegmentsCache/SegmentsCache.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../segmentMessages.js';\nimport type { SegmentSelectorProps } from '../SegmentSelector.types.js';\nimport { getReadableValue } from '../utils.js';\n\n/**\n * Gets the display value props for showing the text or loading state, as well as aria props.\n * @internal\n */\nexport function useTriggerProps(\n  variant: SegmentSelectorProps['variant'],\n  remainingProps: SegmentSelectorProps,\n) {\n  const intl = useIntl();\n  const { segments } = useSegments();\n  const { getSegment } = useSegmentsCache();\n  const safeId = segments[0] ? segments[0].id : undefined;\n  const shouldFetchText =\n    variant !== 'compact' && segments.length === 1 && safeId !== undefined;\n\n  const { data, isLoading } = useQuery(\n    {\n      queryKey: ['getSegment', safeId, shouldFetchText],\n      queryFn: () => getSegment(safeId),\n      enabled: shouldFetchText,\n      placeholderData: keepPreviousData,\n    },\n    segmentsClient.queryClient,\n  );\n\n  const text = useMemo(() => {\n    if (segments.length === 0 || !safeId) {\n      return null;\n    }\n\n    if (variant === 'compact') {\n      return `${segments.length}`;\n    }\n\n    if (segments.length > 1) {\n      return intl.formatMessage(\n        {\n          defaultMessage: '{length} segments',\n          id: '7vkTbyAZNeY/qa9p',\n          description:\n            'Text for SegmentSelector Trigger when multiple segments are selected.',\n        },\n        {\n          length: segments.length,\n        },\n      );\n    }\n\n    if (!data) {\n      return `${safeId}`;\n    }\n\n    const amountOfVariables = segments[0]?.variables?.[0]?.values?.length ?? 0;\n\n    if (amountOfVariables === 1) {\n      return `${data.segment.name}: ${getReadableValue(\n        segments[0].variables?.[0].values[0],\n        intl,\n      )}`;\n    }\n\n    if (amountOfVariables > 1) {\n      return `${data.segment.name} (${amountOfVariables})`;\n    }\n\n    return `${data.segment.name}`;\n  }, [data, intl, safeId, segments, variant]);\n\n  const ariaLabelingProps = _useAriaLabelingProps(remainingProps);\n\n  const ariaLabel = useMemo(() => {\n    const ariaLabelProp = ariaLabelingProps['aria-label'];\n\n    if (\n      ariaLabelProp === undefined &&\n      ariaLabelingProps['aria-labelledby'] === undefined\n    ) {\n      return text\n        ? undefined\n        : intl.formatMessage(SEGMENTSELECTOR_MESSAGES.defaultAriaLabel);\n    }\n\n    const combinedAriaLabel = text\n      ? ariaLabelProp?.concat(', ', text)\n      : ariaLabelProp;\n\n    return combinedAriaLabel;\n  }, [ariaLabelingProps, intl, text]);\n\n  const ariaProps = {\n    ...ariaLabelingProps,\n    'aria-label': ariaLabel,\n    'aria-disabled': remainingProps['aria-disabled'],\n  };\n\n  return {\n    isLoading:\n      shouldFetchText && segmentsClient.hasAccessRights !== false\n        ? isLoading\n        : false,\n    text,\n    ariaProps,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB,gBAAgB;AAC3C,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB,6BAA6B;AAC9D;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAEzC,SAAS,wBAAwB;AAM1B,SAAS,gBACd,SACA,gBACA;AACA,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,SAAS,IAAI,YAAY;AACjC,QAAM,EAAE,WAAW,IAAI,iBAAiB;AACxC,QAAM,SAAS,SAAS,CAAC,IAAI,SAAS,CAAC,EAAE,KAAK;AAC9C,QAAM,kBACJ,YAAY,aAAa,SAAS,WAAW,KAAK,WAAW;AAE/D,QAAM,EAAE,MAAM,UAAU,IAAI;AAAA,IAC1B;AAAA,MACE,UAAU,CAAC,cAAc,QAAQ,eAAe;AAAA,MAChD,SAAS,MAAM,WAAW,MAAM;AAAA,MAChC,SAAS;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IACA,eAAe;AAAA,EACjB;AAEA,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,SAAS,WAAW,KAAK,CAAC,QAAQ;AACpC,aAAO;AAAA,IACT;AAEA,QAAI,YAAY,WAAW;AACzB,aAAO,GAAG,SAAS,MAAM;AAAA,IAC3B;AAEA,QAAI,SAAS,SAAS,GAAG;AACvB,aAAO,KAAK;AAAA,QACV;AAAA,UACE,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aACE;AAAA,QACJ;AAAA,QACA;AAAA,UACE,QAAQ,SAAS;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAEA,QAAI,CAAC,MAAM;AACT,aAAO,GAAG,MAAM;AAAA,IAClB;AAEA,UAAM,oBAAoB,SAAS,CAAC,GAAG,YAAY,CAAC,GAAG,QAAQ,UAAU;AAEzE,QAAI,sBAAsB,GAAG;AAC3B,aAAO,GAAG,KAAK,QAAQ,IAAI,KAAK;AAAA,QAC9B,SAAS,CAAC,EAAE,YAAY,CAAC,EAAE,OAAO,CAAC;AAAA,QACnC;AAAA,MACF,CAAC;AAAA,IACH;AAEA,QAAI,oBAAoB,GAAG;AACzB,aAAO,GAAG,KAAK,QAAQ,IAAI,KAAK,iBAAiB;AAAA,IACnD;AAEA,WAAO,GAAG,KAAK,QAAQ,IAAI;AAAA,EAC7B,GAAG,CAAC,MAAM,MAAM,QAAQ,UAAU,OAAO,CAAC;AAE1C,QAAM,oBAAoB,sBAAsB,cAAc;AAE9D,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,gBAAgB,kBAAkB,YAAY;AAEpD,QACE,kBAAkB,UAClB,kBAAkB,iBAAiB,MAAM,QACzC;AACA,aAAO,OACH,SACA,KAAK,cAAc,yBAAyB,gBAAgB;AAAA,IAClE;AAEA,UAAM,oBAAoB,OACtB,eAAe,OAAO,MAAM,IAAI,IAChC;AAEJ,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,MAAM,IAAI,CAAC;AAElC,QAAM,YAAY;AAAA,IAChB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,iBAAiB,eAAe,eAAe;AAAA,EACjD;AAEA,SAAO;AAAA,IACL,WACE,mBAAmB,eAAe,oBAAoB,QAClD,YACA;AAAA,IACN;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/filters/segment-selector/parts/EmptySegments.css

@@ -1,4 +1,4 @@
-._awal5d0-3-10-4._awal5d0-3-10-4 {
+._awal5d0-3-11-0._awal5d0-3-11-0 {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);

package/esm/filters/segment-selector/parts/EmptySegments.sty.js

@@ -1,5 +1,5 @@
 import "./EmptySegments.css";
-var AppLinkButtonCSS = "_awal5d0-3-10-4";
+var AppLinkButtonCSS = "_awal5d0-3-11-0";
 export {
   AppLinkButtonCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/segment-selector/parts/EmptySegments.css.ts"],
-  "sourcesContent": ["import './EmptySegments.css';\nexport var AppLinkButtonCSS = '_awal5d0-3-10-4';"],
+  "sourcesContent": ["import './EmptySegments.css';\nexport var AppLinkButtonCSS = '_awal5d0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

package/esm/filters/segment-selector/parts/Overlay.css

@@ -1,10 +1,10 @@
-._bqi6d90-3-10-4 {
+._bqi6d90-3-11-0 {
   height: 15px;
   align-self: center;
   margin-right: var(--dt-spacings-size-2, 2px);
   margin-left: var(--dt-spacings-size-8, 8px);
 }
-._bqi6d91-3-10-4._bqi6d91-3-10-4 {
+._bqi6d91-3-11-0._bqi6d91-3-11-0 {
   display: flex;
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
@@ -14,24 +14,24 @@
   text-transform: var(--dt-typography-text-base-emphasized-text-transform, none);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._bqi6d92-3-10-4 {
+._bqi6d92-3-11-0 {
   max-width: 480px;
   min-width: 320px;
   box-sizing: border-box;
   overflow: hidden;
 }
-._bqi6d93-3-10-4 {
+._bqi6d93-3-11-0 {
   max-height: 396px;
   overflow: auto;
   box-sizing: border-box;
 }
-._bqi6d93-3-10-4 ._bqi6d94-3-10-4 {
+._bqi6d93-3-11-0 ._bqi6d94-3-11-0 {
   overflow: hidden;
 }
-._bqi6d95-3-10-4 {
+._bqi6d95-3-11-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._bqi6d96-3-10-4._bqi6d96-3-10-4 {
+._bqi6d96-3-11-0._bqi6d96-3-11-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
@@ -40,6 +40,6 @@
   text-decoration: var(--dt-typography-text-small-emphasized-text-decoration, none);
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._bqi6d97-3-10-4 > fieldset > div {
+._bqi6d97-3-11-0 > fieldset > div {
   gap: var(--dt-spacings-size-8, 8px);
 }

package/esm/filters/segment-selector/parts/Overlay.sty.js

@@ -1,12 +1,12 @@
 import "./Overlay.css";
-var divider = "_bqi6d90-3-10-4";
-var fieldSet = "_bqi6d97-3-10-4";
-var isAnimating = "_bqi6d94-3-10-4";
-var legend = "_bqi6d96-3-10-4";
-var link = "_bqi6d95-3-10-4";
-var menuLink = "_bqi6d91-3-10-4";
-var overlayDefaultWidth = "_bqi6d92-3-10-4";
-var scrollContainer = "_bqi6d93-3-10-4";
+var divider = "_bqi6d90-3-11-0";
+var fieldSet = "_bqi6d97-3-11-0";
+var isAnimating = "_bqi6d94-3-11-0";
+var legend = "_bqi6d96-3-11-0";
+var link = "_bqi6d95-3-11-0";
+var menuLink = "_bqi6d91-3-11-0";
+var overlayDefaultWidth = "_bqi6d92-3-11-0";
+var scrollContainer = "_bqi6d93-3-11-0";
 export {
   divider,
   fieldSet,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/segment-selector/parts/Overlay.css.ts"],
-  "sourcesContent": ["import './Overlay.css';\nexport var divider = '_bqi6d90-3-10-4';\nexport var fieldSet = '_bqi6d97-3-10-4';\nexport var isAnimating = '_bqi6d94-3-10-4';\nexport var legend = '_bqi6d96-3-10-4';\nexport var link = '_bqi6d95-3-10-4';\nexport var menuLink = '_bqi6d91-3-10-4';\nexport var overlayDefaultWidth = '_bqi6d92-3-10-4';\nexport var scrollContainer = '_bqi6d93-3-10-4';"],
+  "sourcesContent": ["import './Overlay.css';\nexport var divider = '_bqi6d90-3-11-0';\nexport var fieldSet = '_bqi6d97-3-11-0';\nexport var isAnimating = '_bqi6d94-3-11-0';\nexport var legend = '_bqi6d96-3-11-0';\nexport var link = '_bqi6d95-3-11-0';\nexport var menuLink = '_bqi6d91-3-11-0';\nexport var overlayDefaultWidth = '_bqi6d92-3-11-0';\nexport var scrollContainer = '_bqi6d93-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,cAAc;AAClB,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,WAAW;AACf,IAAI,sBAAsB;AAC1B,IAAI,kBAAkB;",
   "names": []
 }

package/esm/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.css

@@ -1,17 +1,17 @@
-._7mq3is0-3-10-4 {
+._7mq3is0-3-11-0 {
   all: unset;
   padding: 0;
   width: 100%;
   transition: height var(--dt-animations-expand-collapse-duration-fast, 250ms) var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._7mq3is1-3-10-4 {
+._7mq3is1-3-11-0 {
   height: 0;
   opacity: 0;
 }
-._7mq3is2-3-10-4 {
+._7mq3is2-3-11-0 {
   height: auto;
   opacity: 1;
 }
-._7mq3is3-3-10-4 {
+._7mq3is3-3-11-0 {
   all: unset;
 }

package/esm/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.sty.js

@@ -1,8 +1,8 @@
 import "./ShowMorePanel.css";
-var expandableWrapper = "_7mq3is0-3-10-4";
-var expandableWrapperCollapsed = "_7mq3is1-3-10-4";
-var expandableWrapperExpanded = "_7mq3is2-3-10-4";
-var list = "_7mq3is3-3-10-4";
+var expandableWrapper = "_7mq3is0-3-11-0";
+var expandableWrapperCollapsed = "_7mq3is1-3-11-0";
+var expandableWrapperExpanded = "_7mq3is2-3-11-0";
+var list = "_7mq3is3-3-11-0";
 export {
   expandableWrapper,
   expandableWrapperCollapsed,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.css.ts"],
-  "sourcesContent": ["import './ShowMorePanel.css';\nexport var expandableWrapper = '_7mq3is0-3-10-4';\nexport var expandableWrapperCollapsed = '_7mq3is1-3-10-4';\nexport var expandableWrapperExpanded = '_7mq3is2-3-10-4';\nexport var list = '_7mq3is3-3-10-4';"],
+  "sourcesContent": ["import './ShowMorePanel.css';\nexport var expandableWrapper = '_7mq3is0-3-11-0';\nexport var expandableWrapperCollapsed = '_7mq3is1-3-11-0';\nexport var expandableWrapperExpanded = '_7mq3is2-3-11-0';\nexport var list = '_7mq3is3-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,6BAA6B;AACjC,IAAI,4BAA4B;AAChC,IAAI,OAAO;",
   "names": []
 }

package/esm/filters/segment-selector/parts/TooltipMessages.js

@@ -40,8 +40,7 @@ const WrappedTooltipMessages = ({ ariaLabel }) => {
         select: (data) => ({
           selectedSegment: segment,
           fetchedSegment: data?.segment
-        }),
-        retryOnMount: false
+        })
       }))
     },
     segmentsClient.queryClient

package/esm/filters/segment-selector/parts/TooltipMessages.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/segment-selector/parts/TooltipMessages.tsx"],
-  "sourcesContent": ["import { useSuspenseQueries } from '@tanstack/react-query';\nimport { Suspense } from 'react';\nimport { useIntl, FormattedMessage } from 'react-intl';\n\nimport { SkeletonText } from '../../../content/skeleton/SkeletonText.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n  type CachedSegment,\n} from '../contexts/SegmentsCache/SegmentsCache.js';\nimport { useSegments } from '../hooks/useSegments.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../segmentMessages.js';\nimport * as styles from '../SegmentSelector.sty.js';\nimport { getReadableValue } from '../utils.js';\n\n/** @internal */\nconst SegmentWithVariablesText = ({\n  id,\n  name,\n  variables,\n}: {\n  id: string;\n  name?: string;\n  variables?: string[];\n}) => {\n  const intl = useIntl();\n  const endOfLine = variables && variables.length > 1 ? ';' : '';\n  const values =\n    variables?.map((value) => getReadableValue(value, intl)).join(', ') +\n    endOfLine;\n\n  return (\n    <div key={id} style={{ lineHeight: 1 }}>\n      <Text textStyle=\"small-emphasized\">{name}: </Text>\n      <Text textStyle=\"small\">{values}</Text>\n    </div>\n  );\n};\n\n/** @internal */\nconst WrappedTooltipMessages = ({ ariaLabel }: { ariaLabel?: string }) => {\n  const { segments } = useSegments();\n  const { getSegment } = useSegmentsCache();\n  const result = useSuspenseQueries(\n    {\n      queries: segments.map((segment) => ({\n        queryKey: ['getSegment', segment.id],\n        queryFn: () => getSegment(segment.id),\n        select: (data: CachedSegment | undefined) => ({\n          selectedSegment: segment,\n          fetchedSegment: data?.segment,\n        }),\n        retryOnMount: false,\n      })),\n    },\n    segmentsClient.queryClient,\n  );\n\n  if (segments.length === 0) {\n    return (\n      <Text textStyle=\"small-emphasized\" className={styles.tooltipMaxHeight}>\n        {ariaLabel ?? (\n          <FormattedMessage {...SEGMENTSELECTOR_MESSAGES.defaultAriaLabel} />\n        )}\n      </Text>\n    );\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={4} className={styles.tooltipMaxHeight}>\n      {result.map((query) => {\n        const selectedSegment = query.data?.selectedSegment;\n        const id = selectedSegment.id;\n        const name = query.data?.fetchedSegment?.name ?? id;\n\n        if (selectedSegment?.variables) {\n          return (\n            <SegmentWithVariablesText\n              key={id}\n              id={id}\n              name={name}\n              variables={selectedSegment.variables?.[0]?.values}\n            />\n          );\n        }\n\n        return (\n          <Text key={id} textStyle=\"small-emphasized\">\n            {name}\n          </Text>\n        );\n      })}\n    </Flex>\n  );\n};\n\nexport const TooltipMessages = ({ ariaLabel }: { ariaLabel?: string }) => (\n  /** Due to display: 'contents' on the tooltip we need to define a fixed width here. */\n  <Suspense fallback={<SkeletonText width=\"150px\" />}>\n    <WrappedTooltipMessages ariaLabel={ariaLabel} />\n  </Suspense>\n);\n"],
-  "mappings": "AAmCM,SACA,KADA;AAnCN,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,SAAS,wBAAwB;AAE1C,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,YAAY,YAAY;AACxB,SAAS,wBAAwB;AAGjC,MAAM,2BAA2B,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,YAAY,aAAa,UAAU,SAAS,IAAI,MAAM;AAC5D,QAAM,SACJ,WAAW,IAAI,CAAC,UAAU,iBAAiB,OAAO,IAAI,CAAC,EAAE,KAAK,IAAI,IAClE;AAEF,SACE,qBAAC,SAAa,OAAO,EAAE,YAAY,EAAE,GACnC;AAAA,yBAAC,QAAK,WAAU,oBAAoB;AAAA;AAAA,MAAK;AAAA,OAAE;AAAA,IAC3C,oBAAC,QAAK,WAAU,SAAS,kBAAO;AAAA,OAFxB,EAGV;AAEJ;AAGA,MAAM,yBAAyB,CAAC,EAAE,UAAU,MAA8B;AACxE,QAAM,EAAE,SAAS,IAAI,YAAY;AACjC,QAAM,EAAE,WAAW,IAAI,iBAAiB;AACxC,QAAM,SAAS;AAAA,IACb;AAAA,MACE,SAAS,SAAS,IAAI,CAAC,aAAa;AAAA,QAClC,UAAU,CAAC,cAAc,QAAQ,EAAE;AAAA,QACnC,SAAS,MAAM,WAAW,QAAQ,EAAE;AAAA,QACpC,QAAQ,CAAC,UAAqC;AAAA,UAC5C,iBAAiB;AAAA,UACjB,gBAAgB,MAAM;AAAA,QACxB;AAAA,QACA,cAAc;AAAA,MAChB,EAAE;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,EACjB;AAEA,MAAI,SAAS,WAAW,GAAG;AACzB,WACE,oBAAC,QAAK,WAAU,oBAAmB,WAAW,OAAO,kBAClD,uBACC,oBAAC,oBAAkB,GAAG,yBAAyB,kBAAkB,GAErE;AAAA,EAEJ;AAEA,SACE,oBAAC,QAAK,eAAc,UAAS,KAAK,GAAG,WAAW,OAAO,kBACpD,iBAAO,IAAI,CAAC,UAAU;AACrB,UAAM,kBAAkB,MAAM,MAAM;AACpC,UAAM,KAAK,gBAAgB;AAC3B,UAAM,OAAO,MAAM,MAAM,gBAAgB,QAAQ;AAEjD,QAAI,iBAAiB,WAAW;AAC9B,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA,WAAW,gBAAgB,YAAY,CAAC,GAAG;AAAA;AAAA,QAHtC;AAAA,MAIP;AAAA,IAEJ;AAEA,WACE,oBAAC,QAAc,WAAU,oBACtB,kBADQ,EAEX;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEO,MAAM,kBAAkB,CAAC,EAAE,UAAU;AAAA;AAAA,EAE1C,oBAAC,YAAS,UAAU,oBAAC,gBAAa,OAAM,SAAQ,GAC9C,8BAAC,0BAAuB,WAAsB,GAChD;AAAA;",
+  "sourcesContent": ["import { useSuspenseQueries } from '@tanstack/react-query';\nimport { Suspense } from 'react';\nimport { useIntl, FormattedMessage } from 'react-intl';\n\nimport { SkeletonText } from '../../../content/skeleton/SkeletonText.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n  type CachedSegment,\n} from '../contexts/SegmentsCache/SegmentsCache.js';\nimport { useSegments } from '../hooks/useSegments.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../segmentMessages.js';\nimport * as styles from '../SegmentSelector.sty.js';\nimport { getReadableValue } from '../utils.js';\n\n/** @internal */\nconst SegmentWithVariablesText = ({\n  id,\n  name,\n  variables,\n}: {\n  id: string;\n  name?: string;\n  variables?: string[];\n}) => {\n  const intl = useIntl();\n  const endOfLine = variables && variables.length > 1 ? ';' : '';\n  const values =\n    variables?.map((value) => getReadableValue(value, intl)).join(', ') +\n    endOfLine;\n\n  return (\n    <div key={id} style={{ lineHeight: 1 }}>\n      <Text textStyle=\"small-emphasized\">{name}: </Text>\n      <Text textStyle=\"small\">{values}</Text>\n    </div>\n  );\n};\n\n/** @internal */\nconst WrappedTooltipMessages = ({ ariaLabel }: { ariaLabel?: string }) => {\n  const { segments } = useSegments();\n  const { getSegment } = useSegmentsCache();\n  const result = useSuspenseQueries(\n    {\n      queries: segments.map((segment) => ({\n        queryKey: ['getSegment', segment.id],\n        queryFn: () => getSegment(segment.id),\n        select: (data: CachedSegment | undefined) => ({\n          selectedSegment: segment,\n          fetchedSegment: data?.segment,\n        }),\n      })),\n    },\n    segmentsClient.queryClient,\n  );\n\n  if (segments.length === 0) {\n    return (\n      <Text textStyle=\"small-emphasized\" className={styles.tooltipMaxHeight}>\n        {ariaLabel ?? (\n          <FormattedMessage {...SEGMENTSELECTOR_MESSAGES.defaultAriaLabel} />\n        )}\n      </Text>\n    );\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={4} className={styles.tooltipMaxHeight}>\n      {result.map((query) => {\n        const selectedSegment = query.data?.selectedSegment;\n        const id = selectedSegment.id;\n        const name = query.data?.fetchedSegment?.name ?? id;\n\n        if (selectedSegment?.variables) {\n          return (\n            <SegmentWithVariablesText\n              key={id}\n              id={id}\n              name={name}\n              variables={selectedSegment.variables?.[0]?.values}\n            />\n          );\n        }\n\n        return (\n          <Text key={id} textStyle=\"small-emphasized\">\n            {name}\n          </Text>\n        );\n      })}\n    </Flex>\n  );\n};\n\nexport const TooltipMessages = ({ ariaLabel }: { ariaLabel?: string }) => (\n  /** Due to display: 'contents' on the tooltip we need to define a fixed width here. */\n  <Suspense fallback={<SkeletonText width=\"150px\" />}>\n    <WrappedTooltipMessages ariaLabel={ariaLabel} />\n  </Suspense>\n);\n"],
+  "mappings": "AAmCM,SACA,KADA;AAnCN,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,SAAS,wBAAwB;AAE1C,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,YAAY,YAAY;AACxB,SAAS,wBAAwB;AAGjC,MAAM,2BAA2B,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,YAAY,aAAa,UAAU,SAAS,IAAI,MAAM;AAC5D,QAAM,SACJ,WAAW,IAAI,CAAC,UAAU,iBAAiB,OAAO,IAAI,CAAC,EAAE,KAAK,IAAI,IAClE;AAEF,SACE,qBAAC,SAAa,OAAO,EAAE,YAAY,EAAE,GACnC;AAAA,yBAAC,QAAK,WAAU,oBAAoB;AAAA;AAAA,MAAK;AAAA,OAAE;AAAA,IAC3C,oBAAC,QAAK,WAAU,SAAS,kBAAO;AAAA,OAFxB,EAGV;AAEJ;AAGA,MAAM,yBAAyB,CAAC,EAAE,UAAU,MAA8B;AACxE,QAAM,EAAE,SAAS,IAAI,YAAY;AACjC,QAAM,EAAE,WAAW,IAAI,iBAAiB;AACxC,QAAM,SAAS;AAAA,IACb;AAAA,MACE,SAAS,SAAS,IAAI,CAAC,aAAa;AAAA,QAClC,UAAU,CAAC,cAAc,QAAQ,EAAE;AAAA,QACnC,SAAS,MAAM,WAAW,QAAQ,EAAE;AAAA,QACpC,QAAQ,CAAC,UAAqC;AAAA,UAC5C,iBAAiB;AAAA,UACjB,gBAAgB,MAAM;AAAA,QACxB;AAAA,MACF,EAAE;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,EACjB;AAEA,MAAI,SAAS,WAAW,GAAG;AACzB,WACE,oBAAC,QAAK,WAAU,oBAAmB,WAAW,OAAO,kBAClD,uBACC,oBAAC,oBAAkB,GAAG,yBAAyB,kBAAkB,GAErE;AAAA,EAEJ;AAEA,SACE,oBAAC,QAAK,eAAc,UAAS,KAAK,GAAG,WAAW,OAAO,kBACpD,iBAAO,IAAI,CAAC,UAAU;AACrB,UAAM,kBAAkB,MAAM,MAAM;AACpC,UAAM,KAAK,gBAAgB;AAC3B,UAAM,OAAO,MAAM,MAAM,gBAAgB,QAAQ;AAEjD,QAAI,iBAAiB,WAAW;AAC9B,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA,WAAW,gBAAgB,YAAY,CAAC,GAAG;AAAA;AAAA,QAHtC;AAAA,MAIP;AAAA,IAEJ;AAEA,WACE,oBAAC,QAAc,WAAU,oBACtB,kBADQ,EAEX;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEO,MAAM,kBAAkB,CAAC,EAAE,UAAU;AAAA;AAAA,EAE1C,oBAAC,YAAS,UAAU,oBAAC,gBAAa,OAAM,SAAQ,GAC9C,8BAAC,0BAAuB,WAAsB,GAChD;AAAA;",
   "names": []
 }

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

@@ -1,20 +1,22 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import clsx from "clsx";
 import { motion, useReducedMotion } from "framer-motion";
-import { Fragment, useContext, useRef, useState } from "react";
+import { Fragment as Fragment2, useContext, useRef, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import AnimationsJS from "@dynatrace/strato-design-tokens/animations-js";
-import { PinIcon, PinOffIcon } from "@dynatrace/strato-icons";
+import { PinIcon, PinOffIcon, XmarkIcon } from "@dynatrace/strato-icons";
 import { getAppName } from "@dynatrace-sdk/app-environment";
 import {
   pinSegmentsPreset,
+  removeRecentSegmentsPreset,
   unpinSegmentsPreset
 } from "@dynatrace-sdk/segments-presets";
 import * as styles from "./SegmentsPresets.sty.js";
 import { Button } from "../../../../buttons/button/Button.js";
 import { useOverlayStacking } from "../../../../core/hooks/useOverlayStacking.js";
 import { expandCollapseEasing } from "../../../../core/utils/framer-motion-easings.js";
+import { Divider } from "../../../../layouts/divider/Divider.js";
 import { Flex } from "../../../../layouts/flex/Flex.js";
 import { InputGroup } from "../../../../layouts/input-group/InputGroup.js";
 import { Tooltip } from "../../../../overlays/tooltip/Tooltip.js";
@@ -33,6 +35,7 @@ import { useSegmentsUIContext } from "../../contexts/SegmentsUI/SegmentsUIContex
 import { UISegmentsDispatchContext } from "../../contexts/SegmentsUI/SegmentsUIDispatchContext.js";
 import { areUiSegmentsValid } from "../../contexts/SegmentsUI/segmentValidationHelper.js";
 import { useSegments } from "../../hooks/useSegments.js";
+import { useSegmentsValidation } from "../../hooks/useSegmentsValidation.js";
 import { flattenQueryResultToValues, getReadableValue } from "../../utils.js";
 import * as animationHelperStyles from "../Overlay.sty.js";
 const expandAndCollapseAnimationVariants = {
@@ -72,13 +75,27 @@ const SegmentsPresetText = ({
     "\xA0"
   ] });
   const connectingString = isFirst ? "" : andText;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
     connectingString,
     /* @__PURE__ */ jsx(SegmentText, { segment })
   ] }, segment.id);
 };
-function usePinningTooltipText(pinLimitReached, isPinned) {
+function useActionTooltipText(pinLimitReached, isPinned, isFaulty) {
   const intl = useIntl();
+  if (isFaulty) {
+    return intl.formatMessage({
+      defaultMessage: "Remove",
+      id: "B/mrEkQ2k6RSHAdX",
+      description: "Tooltip text for the remove button of a faulty segment preset."
+    });
+  }
+  if (isPinned) {
+    return intl.formatMessage({
+      defaultMessage: "Unpin",
+      id: "uCbwlgMp2BNGzNro",
+      description: "Text for the unpin button of a segment preset."
+    });
+  }
   if (pinLimitReached && !isPinned) {
     return intl.formatMessage({
       defaultMessage: "You can't pin more than 10 items.",
@@ -86,21 +103,14 @@ function usePinningTooltipText(pinLimitReached, isPinned) {
       description: "Tooltip text for pinning limit."
     });
   }
-  if (!isPinned) {
-    return intl.formatMessage(
-      {
-        defaultMessage: "Pin in {appName}",
-        id: "RPdRdtDJumoOO3os",
-        description: "Tooltip text for pin button."
-      },
-      { appName: getAppName() }
-    );
-  }
-  return intl.formatMessage({
-    defaultMessage: "Unpin",
-    id: "uCbwlgMp2BNGzNro",
-    description: "Text for the unpin button of a segment preset."
-  });
+  return intl.formatMessage(
+    {
+      defaultMessage: "Pin in {appName}",
+      id: "RPdRdtDJumoOO3os",
+      description: "Tooltip text for pin button."
+    },
+    { appName: getAppName() }
+  );
 }
 function updateCachePinMutation(old, id, segments) {
   const pinnedPresets = old.pinnedPresets;
@@ -124,20 +134,42 @@ function updateCacheUnpinMutation(old, id) {
     pinnedPresets
   };
 }
-const PresetTooltipText = ({ segments }) => {
-  return /* @__PURE__ */ jsx(Flex, { flexDirection: "column", gap: 4, children: segments.map((segment) => {
-    return /* @__PURE__ */ jsx(
-      SegmentText,
-      {
-        segment,
-        variableClassName: textStyleCSS({
-          fontStyle: "text",
-          textStyle: "small"
-        })
-      },
-      segment.id
-    );
-  }) });
+function updateCacheRemoveRecentMutation(old, id) {
+  return {
+    ...old,
+    recentPresets: old.recentPresets.filter((preset) => preset.id !== id)
+  };
+}
+const PresetTooltipText = ({
+  segments,
+  isFaulty
+}) => {
+  return /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: 4, children: [
+    isFaulty && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+        FormattedMessage,
+        {
+          defaultMessage: "One or more segments of this preset are invalid and can't be applied.",
+          id: "6cOIaWQY3mdZZITF",
+          description: "Tooltip text shown above the segment list for presets that contain invalid segments."
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Divider, {})
+    ] }),
+    segments.map((segment) => {
+      return /* @__PURE__ */ jsx(
+        SegmentText,
+        {
+          segment,
+          variableClassName: textStyleCSS({
+            fontStyle: "text",
+            textStyle: "small"
+          })
+        },
+        segment.id
+      );
+    })
+  ] });
 };
 const SegmentText = ({
   segment,
@@ -149,7 +181,9 @@ const SegmentText = ({
     {
       queryKey: ["getSegment", segment.id],
       queryFn: () => getSegment(segment.id),
-      notifyOnChangeProps: ["dataUpdatedAt"]
+      notifyOnChangeProps: ["dataUpdatedAt"],
+      initialData: () => segmentsClient.queryClient.getQueryData(["getAllSegments"])?.get(segment.id),
+      initialDataUpdatedAt: () => segmentsClient.queryClient.getQueryState(["getAllSegments"])?.dataUpdatedAt
     },
     segmentsClient.queryClient
   );
@@ -165,11 +199,30 @@ const SegmentText = ({
   }
   return `${data?.segment.name ?? segment.id}${variables}`;
 };
+function getStateAndIcon(isPinned, isFaulty) {
+  if (isFaulty) {
+    return {
+      icon: /* @__PURE__ */ jsx(XmarkIcon, {}),
+      actionButtonDataDtProperties: "state:remove"
+    };
+  }
+  if (isPinned) {
+    return {
+      icon: /* @__PURE__ */ jsx(PinOffIcon, {}),
+      actionButtonDataDtProperties: "state:unpin"
+    };
+  }
+  return {
+    icon: /* @__PURE__ */ jsx(PinIcon, {}),
+    actionButtonDataDtProperties: "state:pin"
+  };
+}
 const SegmentsPreset = (props) => {
   const shouldReduceMotion = useReducedMotion();
   const {
     uiPreset,
     id,
+    origin,
     isPinned,
     isSelected,
     pinLimitReached
@@ -223,6 +276,23 @@ const SegmentsPreset = (props) => {
     },
     segmentsClient.queryClient
   );
+  const removeRecent = useMutation(
+    {
+      mutationKey: ["remove-recent-segment-preset", id],
+      mutationFn: removeRecentSegmentsPreset,
+      onMutate: async () => runOptimisticMutation(
+        "getSegmentsPresets",
+        (prevState) => updateCacheRemoveRecentMutation(prevState, id),
+        ["remove-recent-segment-preset", id, "getSegmentsPresets"]
+      ),
+      onError: (error, _, context) => handleFailedOptimisticMutation("getSegmentsPresets", error, context),
+      onSettled: () => handleSettledOptimisticMutation(
+        ["getSegmentsPresets"],
+        ["remove-recent-segment-preset", id]
+      )
+    },
+    segmentsClient.queryClient
+  );
   const applyPreset = useMutation(
     {
       mutationKey: ["apply-segment-preset", id],
@@ -244,19 +314,32 @@ const SegmentsPreset = (props) => {
         return setSegments(flattenedSegments);
       },
       onSuccess: async () => {
-        const isValid = await areUiSegmentsValid(segments);
-        if (isValid) {
+        const isValid2 = await areUiSegmentsValid(segments);
+        if (isValid2) {
           overlayState?.close();
         }
       }
     },
     segmentsClient.queryClient
   );
-  const color = isSelected ? "primary" : "neutral";
-  const pinningTooltipText = usePinningTooltipText(pinLimitReached, isPinned);
-  const icon = isPinned ? /* @__PURE__ */ jsx(PinOffIcon, {}) : /* @__PURE__ */ jsx(PinIcon, {});
-  const pinButtonDataDtProperties = `state:${isPinned ? "unpin" : "pin"}`;
-  const onClick = () => isPinned ? unpin.mutate(uiPreset.id) : pin.mutate(segments);
+  const { isValid, isPending: isValidationPending } = useSegmentsValidation(segments);
+  const isFaulty = !isValid;
+  const color = isSelected && !isFaulty ? "primary" : "neutral";
+  const actionTooltipText = useActionTooltipText(
+    pinLimitReached,
+    isPinned,
+    isFaulty
+  );
+  const { icon, actionButtonDataDtProperties } = getStateAndIcon(
+    isPinned,
+    isFaulty
+  );
+  const onClick = () => {
+    if (isFaulty) {
+      return origin === "pinned" ? unpin.mutate(uiPreset.id) : removeRecent.mutate(uiPreset.id);
+    }
+    return isPinned ? unpin.mutate(uiPreset.id) : pin.mutate(segments);
+  };
   const labelRef = useRef(null);
   const [showTooltip, setShowTooltip] = useState(false);
   const stackingContext = useOverlayStacking(void 0, "overlay");
@@ -277,7 +360,7 @@ const SegmentsPreset = (props) => {
         {
           className: clsx([
             styles.inputGroup,
-            { [styles.inputGroupSelected]: isSelected }
+            { [styles.inputGroupSelected]: isSelected && !isFaulty }
           ]),
           children: [
             /* @__PURE__ */ jsx(
@@ -285,9 +368,13 @@ const SegmentsPreset = (props) => {
               {
                 placement: "left",
                 fallbackPlacements: ["top", "bottom", "right"],
-                text: /* @__PURE__ */ jsx(PresetTooltipText, { segments }),
+                text: /* @__PURE__ */ jsx(PresetTooltipText, { segments, isFaulty }),
                 open: showTooltip,
                 onOpenChange: (isOpen) => {
+                  if (isFaulty) {
+                    setShowTooltip(isOpen);
+                    return;
+                  }
                   const hasOverFlow = (labelRef.current?.scrollWidth ?? 0) > (labelRef.current?.clientWidth ?? 0);
                   setShowTooltip(isOpen && hasOverFlow);
                 },
@@ -305,7 +392,9 @@ const SegmentsPreset = (props) => {
                     className: clsx(styles.presetButton, {
                       [styles.selectionMark]: isSelected
                     }),
-                    onClick: () => applyPreset.mutate(),
+                    disabled: isFaulty,
+                    onClick: () => !isValidationPending && applyPreset.mutate(),
+                    id: `preset-label-${id}`,
                     children: /* @__PURE__ */ jsx(Button.Label, { className: styles.buttonLabel, ref: labelRef, children: segments.map((segment, index) => /* @__PURE__ */ jsx(
                       SegmentsPresetText,
                       {
@@ -322,7 +411,7 @@ const SegmentsPreset = (props) => {
               Tooltip,
               {
                 placement: "right",
-                text: pinningTooltipText,
+                text: actionTooltipText,
                 className: textStyleCSS({
                   fontStyle: "text",
                   textStyle: "small-emphasized"
@@ -334,10 +423,11 @@ const SegmentsPreset = (props) => {
                     color,
                     className: styles.suffixButton,
                     onClick,
-                    disabled: pinLimitReached && !isPinned,
-                    "aria-label": pinningTooltipText,
+                    disabled: isValidationPending || !isFaulty && pinLimitReached && !isPinned,
+                    "aria-label": actionTooltipText,
+                    "aria-describedby": `preset-label-${id}`,
                     "data-dt-children-name": "PinUnpin",
-                    "data-dt-properties": pinButtonDataDtProperties,
+                    "data-dt-properties": actionButtonDataDtProperties,
                     children: icon
                   }
                 )