@dynatrace/strato-components 3.10.4 → 3.11.0

package/filters/segment-selector/SegmentSelector.js

@@ -34,6 +34,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_react_is = require("react-is");
+var import_useInternalFormRegistration = require("../../forms/form/hooks/useInternalFormRegistration.js");
 var import_useFormControl = require("../../forms/forms-core/hooks/useFormControl.js");
 var import_formfield_messages_state_reducer = require("../../forms/forms-core/state/formfield-messages-state-reducer.js");
 var import_SegmentsCache = require("./contexts/SegmentsCache/SegmentsCache.js");
@@ -106,12 +107,17 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
     disabled: propDisabled,
     required: propRequired,
     name,
+    _form,
+    _messageTarget,
     ...remainingProps
   } = props;
   const intl = (0, import_react_intl.useIntl)();
   const inputRef = (0, import_react.useRef)(null);
   const internalButtonRef = (0, import_react.useRef)(null);
-  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
+  const formValidityChangeRef = (0, import_react.useRef)(void 0);
+  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(
+    (state) => formValidityChangeRef.current?.(state)
+  );
   const {
     disabled,
     required,
@@ -151,15 +157,78 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
       const errorKeys = await Promise.all(segments.map(import_segmentValidationHelper.getErrorKey));
       return (0, import_validation_builders.getValidationState)(
         errorKeys.find((key) => key !== null) ?? void 0,
-        trigger
+        trigger,
+        void 0,
+        id
       );
     },
-    [intl, segments]
+    [id, intl, segments]
   );
   const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
     _emitValidationState,
     () => getSegmentValidationState("manual")
   );
+  const runValidation = (0, import_react.useCallback)(async () => {
+    formFieldMessagesDispatch?.({
+      type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: true }
+    });
+    if (import_SegmentsCache.segmentsClient.hasAccessRights === false) {
+      formFieldMessagesDispatch?.({
+        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
+        payload: {
+          id: errorId,
+          variant: "error",
+          validityStateKey: "customError",
+          messageType: "formcontrol",
+          showError: true,
+          message: intl.formatMessage(
+            import_segmentMessages.SEGMENTSELECTOR_MESSAGES.noReadAndWriteAccess
+          )
+        }
+      });
+    }
+    await (0, import_segmentValidationHelper.validateSegments)(
+      segments,
+      onChange,
+      formFieldMessagesDispatch,
+      formFieldMessagesState.formControlMessages,
+      errorId,
+      true
+    ).catch(() => void 0);
+  }, [
+    errorId,
+    formFieldMessagesDispatch,
+    formFieldMessagesState.formControlMessages,
+    intl,
+    onChange,
+    segments
+  ]);
+  const formControl = (0, import_useInternalFormRegistration.useInternalFormRegistration)({
+    id,
+    name,
+    form: _form,
+    messageTarget: _messageTarget,
+    value: segments.length > 0 ? stringifiedValue : "",
+    onValidityChange,
+    focus: () => internalButtonRef.current?.focus(),
+    validateField: async ({ reveal, trigger }) => {
+      inputRef.current?.checkValidity();
+      if (reveal) {
+        await runValidation();
+      }
+      const validationState = await getSegmentValidationState(trigger);
+      return emitValidationState(validationState);
+    },
+    resetValidation: () => {
+      inputRef.current?.setCustomValidity("");
+      formFieldMessagesDispatch?.({
+        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+        payload: { isTouched: false, resetShowError: true }
+      });
+    }
+  });
+  formValidityChangeRef.current = formControl.onValidityChange;
   const segmentSelectorProps = {
     "data-dtrum-allow": dataDtrumAllow,
     "data-dtrum-mask": dataDtrumMask,
@@ -204,6 +273,20 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
           true
         ).catch(() => void 0);
       }
+      if (isOpen2) {
+        void import_SegmentsCache.segmentsClient.queryClient.invalidateQueries({
+          queryKey: ["getAllSegments"]
+        });
+        void import_SegmentsCache.segmentsClient.queryClient.invalidateQueries({
+          queryKey: ["getSegment"]
+        });
+        void import_SegmentsCache.segmentsClient.queryClient.invalidateQueries({
+          queryKey: ["errorKey"]
+        });
+        void import_SegmentsCache.segmentsClient.queryClient.invalidateQueries({
+          queryKey: ["getSegmentVariables"]
+        });
+      }
       onOpenChange?.(isOpen2);
     },
     additionalElevation: "overlay",
@@ -225,79 +308,22 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
       close: overlayState.close,
       validate: async () => {
         inputRef.current?.checkValidity();
-        formFieldMessagesDispatch?.({
-          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-          payload: { isTouched: true }
-        });
-        if (import_SegmentsCache.segmentsClient.hasAccessRights === false) {
-          formFieldMessagesDispatch?.({
-            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
-            payload: {
-              id: errorId,
-              variant: "error",
-              validityStateKey: "customError",
-              messageType: "formcontrol",
-              showError: true,
-              message: intl.formatMessage(
-                import_segmentMessages.SEGMENTSELECTOR_MESSAGES.noReadAndWriteAccess
-              )
-            }
-          });
-        }
-        await (0, import_segmentValidationHelper.validateSegments)(
-          segments,
-          onChange,
-          formFieldMessagesDispatch,
-          formFieldMessagesState.formControlMessages,
-          errorId,
-          true
-        ).catch(() => void 0);
+        await runValidation();
         emitValidationState(await getSegmentValidationState("manual"));
       },
       // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
       validateAsync: async () => {
         inputRef.current?.checkValidity();
-        formFieldMessagesDispatch?.({
-          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-          payload: { isTouched: true }
-        });
-        if (import_SegmentsCache.segmentsClient.hasAccessRights === false) {
-          formFieldMessagesDispatch?.({
-            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
-            payload: {
-              id: errorId,
-              variant: "error",
-              validityStateKey: "customError",
-              messageType: "formcontrol",
-              showError: true,
-              message: intl.formatMessage(
-                import_segmentMessages.SEGMENTSELECTOR_MESSAGES.noReadAndWriteAccess
-              )
-            }
-          });
-        }
-        await (0, import_segmentValidationHelper.validateSegments)(
-          segments,
-          onChange,
-          formFieldMessagesDispatch,
-          formFieldMessagesState.formControlMessages,
-          errorId,
-          true
-        ).catch(() => void 0);
+        await runValidation();
         const state = await getSegmentValidationState("manual");
         return emitValidationState(state);
       }
     }),
     [
-      errorId,
-      formFieldMessagesDispatch,
-      formFieldMessagesState.formControlMessages,
-      intl,
-      onChange,
+      runValidation,
       emitValidationState,
       overlayState.close,
       overlayState.open,
-      segments,
       getSegmentValidationState
     ]
   );
@@ -398,6 +424,7 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
           readOnly,
           disabled,
           name,
+          form: _form,
           required,
           tabIndex: -1,
           "aria-disabled": ariaDisabled,

package/filters/segment-selector/SegmentSelector.sty.js

@@ -24,7 +24,7 @@ __export(SegmentSelector_css_exports, {
 });
 module.exports = __toCommonJS(SegmentSelector_css_exports);
 var import_SegmentSelector_css_ts_vanilla = require("./SegmentSelector.css");
-var overwriteTooltipElementPadding = "_11m6jkl3-3-10-4";
-var segmentSelectorList = "_11m6jkl0-3-10-4";
-var segmentSelectorListItem = "_11m6jkl1-3-10-4";
-var tooltipMaxHeight = "_11m6jkl2-3-10-4";
+var overwriteTooltipElementPadding = "_11m6jkl3-3-11-0";
+var segmentSelectorList = "_11m6jkl0-3-11-0";
+var segmentSelectorListItem = "_11m6jkl1-3-11-0";
+var tooltipMaxHeight = "_11m6jkl2-3-11-0";

package/filters/segment-selector/SegmentSelector.types.d.ts

@@ -6,12 +6,25 @@ import type { MaskingProps } from '../../core/types/masking-props.js';
 import type { StylingProps } from '../../core/types/styling-props.js';
 import type { WithChildren } from '../../core/types/with-children.js';
 import type { FormControlWithOverlayRef } from '../../forms/shared-types.js';
+import type { MessageTarget } from '../../forms/validation/message-routing.js';
 import type { ValidationState } from '../../forms/validation/types.js';
 /**
  * Accepted properties for SegmentSelector
  * @public
  */
 export type SegmentSelectorProps = DOMProps & WithChildren & StylingProps & DataTestId & MaskingProps & BehaviorTrackingProps & Omit<FormControlBaseProps<(...args: any[]) => void, HTMLElement>, 'onChange' | 'controlState' | 'onBlur' | 'onFocus'> & {
+    /**
+     * Internal: associates this control with a `_Form` rendered outside its
+     * React subtree via the native `form` attribute. Unstable.
+     * @internal
+     */
+    _form?: string;
+    /**
+     * Internal: routes this control's native/Strato validation messages to the
+     * field outlet (default), the enclosing form's outlet, or both. Unstable.
+     * @internal
+     */
+    _messageTarget?: MessageTarget | MessageTarget[];
     /**
      * Configures the style of the trigger.
      * @defaultValue 'default

package/filters/segment-selector/contexts/SegmentsCache/SegmentsCache.js

@@ -31,7 +31,8 @@ const segmentQueryClient = new import_react_query.QueryClient({
       refetchOnWindowFocus: false,
       refetchOnMount: true,
       retry: false,
-      staleTime: Infinity
+      staleTime: 60 * 1e3
+      // 1 minute
     }
   }
 });

package/filters/segment-selector/contexts/SegmentsUI/SegmentsUIContext.d.ts

@@ -13,6 +13,7 @@ export declare const useSegmentsUIContext: () => {
     clearPlaceholder: () => void;
     setUISegments: (uiSegments: SegmentSelectorUIState["uiSegments"], hasSelection?: boolean) => void;
     setArrayIdentifierError: (hasError: boolean, id: string) => void;
+    setUnavailableVariables: (id: string, values: Set<string>) => void;
 };
 /**
  * Provider for the UISegments context that stores the selected segments in the proper order.

package/filters/segment-selector/contexts/SegmentsUI/SegmentsUIContext.js

@@ -61,6 +61,9 @@ const useSegmentsUIContext = () => {
   function setArrayIdentifierError(hasError, id) {
     dispatch({ type: "setArrayIdentifierError", payload: { hasError, id } });
   }
+  function setUnavailableVariables(id, values) {
+    dispatch({ type: "setUnavailableVariables", payload: { id, values } });
+  }
   return {
     removeAllUISegments,
     removeUISegment,
@@ -68,7 +71,8 @@ const useSegmentsUIContext = () => {
     updateUISegment,
     clearPlaceholder,
     setUISegments,
-    setArrayIdentifierError
+    setArrayIdentifierError,
+    setUnavailableVariables
   };
 };
 const UISegmentsProvider = (props) => {

package/filters/segment-selector/contexts/SegmentsUI/SegmentsUIReducer.d.ts

@@ -33,6 +33,12 @@ export type SegmentSelectorReducerActions = {
         uiSegments: SegmentSelectorUIState['uiSegments'];
         hasSelection?: boolean;
     };
+} | {
+    type: 'setUnavailableVariables';
+    payload: {
+        id: string;
+        values: Set<string>;
+    };
 };
 export type SegmentSelectorUIState = {
     uiSegments: UISegment[];

package/filters/segment-selector/contexts/SegmentsUI/SegmentsUIReducer.js

@@ -101,7 +101,11 @@ function segmentsUIReducer(state, action) {
       );
       if (index !== -1) {
         const updatedSegments = [...state.uiSegments];
-        updatedSegments[index] = { ...newSegment };
+        const oldUiSegment = updatedSegments[index];
+        updatedSegments[index] = {
+          ...newSegment,
+          unavailableVariables: newSegment.id === oldSegment.id ? oldUiSegment?.unavailableVariables : void 0
+        };
         return {
           ...state,
           isTouched: true,
@@ -143,5 +147,24 @@ function segmentsUIReducer(state, action) {
         )
       };
     }
+    case "setUnavailableVariables": {
+      const { payload } = action;
+      const { id, values } = payload;
+      const index = state.uiSegments.findIndex(
+        (uiSegment) => uiSegment.id === id
+      );
+      if (index !== -1) {
+        const updatedSegments = [...state.uiSegments];
+        updatedSegments[index] = {
+          ...updatedSegments[index],
+          unavailableVariables: values
+        };
+        return {
+          ...state,
+          uiSegments: updatedSegments
+        };
+      }
+      return state;
+    }
   }
 }

package/filters/segment-selector/contexts/SegmentsUI/UISegments.types.d.ts

@@ -2,5 +2,6 @@ import type { FilterSegment } from '@dynatrace-sdk/client-query';
 /** @internal */
 export type UISegment = FilterSegment & {
     isPlaceholder?: boolean;
+    unavailableVariables?: Set<string>;
 };
 //# sourceMappingURL=UISegments.types.d.ts.map

package/filters/segment-selector/hooks/useSegmentsValidation.d.ts

@@ -0,0 +1,9 @@
+import type { FilterSegment } from '@dynatrace-sdk/client-query';
+import { type StratoValidityStateKey } from '../../../forms/validation/types.js';
+/** @internal */
+export declare function useSegmentsValidation(segments: FilterSegment[], enabled?: boolean): {
+    errorKeys: (StratoValidityStateKey | null)[];
+    isValid: boolean;
+    isPending: boolean;
+};
+//# sourceMappingURL=useSegmentsValidation.d.ts.map

package/filters/segment-selector/hooks/useSegmentsValidation.js

@@ -0,0 +1,58 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useSegmentsValidation_exports = {};
+__export(useSegmentsValidation_exports, {
+  useSegmentsValidation: () => useSegmentsValidation
+});
+module.exports = __toCommonJS(useSegmentsValidation_exports);
+var import_react_query = require("@tanstack/react-query");
+var import_types = require("../../../forms/validation/types.js");
+var import_SegmentsCache = require("../contexts/SegmentsCache/SegmentsCache.js");
+var import_segmentValidationHelper = require("../contexts/SegmentsUI/segmentValidationHelper.js");
+function useSegmentsValidation(segments, enabled = true) {
+  const { data } = (0, import_react_query.useQuery)(
+    {
+      queryKey: ["segmentsValidation", segments],
+      queryFn: () => Promise.all(
+        segments.map(
+          (segment) => (
+            // If getErrorKey throws (TanStack Query deduplication means SegmentText's
+            // throwing queryFn wins for unavailable segments), treat as faulty.
+            (0, import_segmentValidationHelper.getErrorKey)(segment).catch(
+              () => import_types.StratoValidityStateKeys.unavailable
+            )
+          )
+        )
+      ),
+      enabled
+    },
+    import_SegmentsCache.segmentsClient.queryClient
+  );
+  if (!data) {
+    return {
+      errorKeys: new Array(segments.length).fill(null),
+      isValid: true,
+      isPending: enabled
+    };
+  }
+  return {
+    errorKeys: data,
+    isValid: data.every((key) => key === null),
+    isPending: false
+  };
+}

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

@@ -38,7 +38,8 @@ function useTriggerProps(variant, remainingProps) {
     {
       queryKey: ["getSegment", safeId, shouldFetchText],
       queryFn: () => getSegment(safeId),
-      enabled: shouldFetchText
+      enabled: shouldFetchText,
+      placeholderData: import_react_query.keepPreviousData
     },
     import_SegmentsCache.segmentsClient.queryClient
   );
@@ -90,5 +91,9 @@ function useTriggerProps(variant, remainingProps) {
     "aria-label": ariaLabel,
     "aria-disabled": remainingProps["aria-disabled"]
   };
-  return { isLoading: shouldFetchText ? isLoading : false, text, ariaProps };
+  return {
+    isLoading: shouldFetchText && import_SegmentsCache.segmentsClient.hasAccessRights !== false ? isLoading : false,
+    text,
+    ariaProps
+  };
 }

package/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/filters/segment-selector/parts/EmptySegments.sty.js

@@ -21,4 +21,4 @@ __export(EmptySegments_css_exports, {
 });
 module.exports = __toCommonJS(EmptySegments_css_exports);
 var import_EmptySegments_css_ts_vanilla = require("./EmptySegments.css");
-var AppLinkButtonCSS = "_awal5d0-3-10-4";
+var AppLinkButtonCSS = "_awal5d0-3-11-0";

package/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/filters/segment-selector/parts/Overlay.sty.js

@@ -28,11 +28,11 @@ __export(Overlay_css_exports, {
 });
 module.exports = __toCommonJS(Overlay_css_exports);
 var import_Overlay_css_ts_vanilla = require("./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";

package/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/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.sty.js

@@ -24,7 +24,7 @@ __export(ShowMorePanel_css_exports, {
 });
 module.exports = __toCommonJS(ShowMorePanel_css_exports);
 var import_ShowMorePanel_css_ts_vanilla = require("./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";

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

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

package/filters/segment-selector/parts/segmentsPresets/SegmentsPreset.d.ts

@@ -3,6 +3,8 @@ import { type SegmentsPreset as SegmentsPresetType } from '@dynatrace-sdk/segmen
 interface SegmentsPresetProps {
     uiPreset: SegmentsPresetType;
     id: string;
+    /** Which section rendered this row - determines what "Remove" acts on, independent of `isPinned`. */
+    origin: 'recent' | 'pinned';
     pinLimitReached: boolean;
     isPinned: boolean;
     isSelected: boolean;