@dynatrace/strato-components 3.10.4 → 3.11.0

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

@@ -10,6 +10,7 @@ import {
 } from "react";
 import { useIntl } from "react-intl";
 import { isElement } from "react-is";
+import { useInternalFormRegistration } from "../../forms/form/hooks/useInternalFormRegistration.js";
 import { useFormControl } from "../../forms/forms-core/hooks/useFormControl.js";
 import { FormFieldMessagesAction } from "../../forms/forms-core/state/formfield-messages-state-reducer.js";
 import { segmentsClient } from "./contexts/SegmentsCache/SegmentsCache.js";
@@ -88,12 +89,17 @@ const SegmentSelectorFwd = forwardRef((props, forwardedRef) => {
     disabled: propDisabled,
     required: propRequired,
     name,
+    _form,
+    _messageTarget,
     ...remainingProps
   } = props;
   const intl = useIntl();
   const inputRef = useRef(null);
   const internalButtonRef = useRef(null);
-  const _emitValidationState = useValidationStateEmitter(onValidityChange);
+  const formValidityChangeRef = useRef(void 0);
+  const _emitValidationState = useValidationStateEmitter(
+    (state) => formValidityChangeRef.current?.(state)
+  );
   const {
     disabled,
     required,
@@ -133,15 +139,78 @@ const SegmentSelectorFwd = forwardRef((props, forwardedRef) => {
       const errorKeys = await Promise.all(segments.map(getErrorKey));
       return getValidationState(
         errorKeys.find((key) => key !== null) ?? void 0,
-        trigger
+        trigger,
+        void 0,
+        id
       );
     },
-    [intl, segments]
+    [id, intl, segments]
   );
   const emitValidationState = useCustomMessageEmitter(
     _emitValidationState,
     () => getSegmentValidationState("manual")
   );
+  const runValidation = useCallback(async () => {
+    formFieldMessagesDispatch?.({
+      type: FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: true }
+    });
+    if (segmentsClient.hasAccessRights === false) {
+      formFieldMessagesDispatch?.({
+        type: FormFieldMessagesAction.ADDMESSAGE,
+        payload: {
+          id: errorId,
+          variant: "error",
+          validityStateKey: "customError",
+          messageType: "formcontrol",
+          showError: true,
+          message: intl.formatMessage(
+            SEGMENTSELECTOR_MESSAGES.noReadAndWriteAccess
+          )
+        }
+      });
+    }
+    await validateSegments(
+      segments,
+      onChange,
+      formFieldMessagesDispatch,
+      formFieldMessagesState.formControlMessages,
+      errorId,
+      true
+    ).catch(() => void 0);
+  }, [
+    errorId,
+    formFieldMessagesDispatch,
+    formFieldMessagesState.formControlMessages,
+    intl,
+    onChange,
+    segments
+  ]);
+  const formControl = 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: FormFieldMessagesAction.SETISTOUCHED,
+        payload: { isTouched: false, resetShowError: true }
+      });
+    }
+  });
+  formValidityChangeRef.current = formControl.onValidityChange;
   const segmentSelectorProps = {
     "data-dtrum-allow": dataDtrumAllow,
     "data-dtrum-mask": dataDtrumMask,
@@ -186,6 +255,20 @@ const SegmentSelectorFwd = forwardRef((props, forwardedRef) => {
           true
         ).catch(() => void 0);
       }
+      if (isOpen2) {
+        void segmentsClient.queryClient.invalidateQueries({
+          queryKey: ["getAllSegments"]
+        });
+        void segmentsClient.queryClient.invalidateQueries({
+          queryKey: ["getSegment"]
+        });
+        void segmentsClient.queryClient.invalidateQueries({
+          queryKey: ["errorKey"]
+        });
+        void segmentsClient.queryClient.invalidateQueries({
+          queryKey: ["getSegmentVariables"]
+        });
+      }
       onOpenChange?.(isOpen2);
     },
     additionalElevation: "overlay",
@@ -207,79 +290,22 @@ const SegmentSelectorFwd = forwardRef((props, forwardedRef) => {
       close: overlayState.close,
       validate: async () => {
         inputRef.current?.checkValidity();
-        formFieldMessagesDispatch?.({
-          type: FormFieldMessagesAction.SETISTOUCHED,
-          payload: { isTouched: true }
-        });
-        if (segmentsClient.hasAccessRights === false) {
-          formFieldMessagesDispatch?.({
-            type: FormFieldMessagesAction.ADDMESSAGE,
-            payload: {
-              id: errorId,
-              variant: "error",
-              validityStateKey: "customError",
-              messageType: "formcontrol",
-              showError: true,
-              message: intl.formatMessage(
-                SEGMENTSELECTOR_MESSAGES.noReadAndWriteAccess
-              )
-            }
-          });
-        }
-        await 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: FormFieldMessagesAction.SETISTOUCHED,
-          payload: { isTouched: true }
-        });
-        if (segmentsClient.hasAccessRights === false) {
-          formFieldMessagesDispatch?.({
-            type: FormFieldMessagesAction.ADDMESSAGE,
-            payload: {
-              id: errorId,
-              variant: "error",
-              validityStateKey: "customError",
-              messageType: "formcontrol",
-              showError: true,
-              message: intl.formatMessage(
-                SEGMENTSELECTOR_MESSAGES.noReadAndWriteAccess
-              )
-            }
-          });
-        }
-        await 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
     ]
   );
@@ -380,6 +406,7 @@ const SegmentSelectorFwd = forwardRef((props, forwardedRef) => {
           readOnly,
           disabled,
           name,
+          form: _form,
           required,
           tabIndex: -1,
           "aria-disabled": ariaDisabled,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/segment-selector/SegmentSelector.tsx"],
-  "sourcesContent": ["\uFEFFimport {\n  Children,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport { useFormControl } from '../../forms/forms-core/hooks/useFormControl.js';\nimport { FormFieldMessagesAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlWithOverlayRef } from '../../forms/shared-types.js';\nimport { segmentsClient } from './contexts/SegmentsCache/SegmentsCache.js';\nimport { SegmentsTriggerContext } from './contexts/SegmentsUI/SegmentsTriggerContext.js';\nimport { UISegmentsProvider } from './contexts/SegmentsUI/SegmentsUIContext.js';\nimport {\n  getErrorKey,\n  validateSegments,\n} from './contexts/SegmentsUI/segmentValidationHelper.js';\nimport { CustomTrigger } from './CustomTrigger.js';\nimport { useSegments } from './hooks/useSegments.js';\nimport { useTooltipHandler } from './hooks/useTooltipHandler.js';\nimport { useTriggerProps } from './hooks/useTriggerProps.js';\nimport { SegmentsOverlay } from './parts/Overlay.js';\nimport { SegmentSelectorTrigger } from './parts/selectionBar/SegmentSelectorTrigger.js';\nimport { TooltipMessages } from './parts/TooltipMessages.js';\nimport { SEGMENTSELECTOR_MESSAGES } from './segmentMessages.js';\nimport * as styles from './SegmentSelector.sty.js';\nimport type {\n  SegmentSelectorProps,\n  SegmentSelectorRef,\n} from './SegmentSelector.types.js';\nimport { FocusScope } from '../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../core/components/OverlayContainer.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { createStratoLogger } from '../../core/sdk/sdk-logger.js';\nimport { StratoLoggerContext } from '../../core/sdk/StratoLoggerContext.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { withFormFieldMessageContextProvider } from '../../forms/forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../../forms/forms-core/hooks/useFormFieldValidation.js';\nimport type {\n  ValidationState,\n  ValidationTrigger,\n} from '../../forms/validation/types.js';\nimport { useCustomMessageEmitter } from '../../forms/validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../../forms/validation/useValidationStateEmitter.js';\nimport { getValidationState } from '../../forms/validation/validation-builders.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { overlayCSS } from '../../overlays/overlay/Overlay.sty.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\n\nconst COMPONENT_NAME = 'SegmentSelector';\n\n/** Iterates over child nodes to extract the content component slot. */\nfunction getCustomTriggerSlot(children: ReactNode) {\n  let customTrigger: ReactElement | undefined;\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case CustomTrigger:\n          customTrigger = child;\n          break;\n        default: {\n          if (isDev()) {\n            // eslint-disable-next-line no-console\n            console.warn(\n              'Only CustomTrigger is a valid child of the SegmentSelector.',\n            );\n          }\n          break;\n        }\n      }\n    } else if (child && isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn('The used child is not supported by the SegmentSelector.');\n    }\n  });\n\n  return customTrigger;\n}\n\nconst SegmentSelectorFwd = forwardRef<\n  SegmentSelectorRef<HTMLButtonElement>,\n  SegmentSelectorProps\n>((props, forwardedRef) => {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    id: propId,\n    'data-testid': dataTestId,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dtrum-mask': dataDtrumMask,\n    variant = 'default',\n    onOpenChange,\n    onValidityChange,\n    readOnly: propReadOnly,\n    disabled: propDisabled,\n    required: propRequired,\n    name,\n    ...remainingProps\n  }: SegmentSelectorProps = props;\n\n  const intl = useIntl();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const internalButtonRef = useRef<HTMLButtonElement>(null);\n  const _emitValidationState = useValidationStateEmitter(onValidityChange);\n\n  const {\n    disabled,\n    required,\n    id,\n    ariaDisabled,\n    readOnly,\n    showError,\n    messageState: formFieldMessagesState,\n    messageDispatch: formFieldMessagesDispatch,\n  } = useFormControl({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: remainingProps['aria-disabled'],\n    propReadOnly,\n  });\n\n  const {\n    isLoading,\n    text,\n    ariaProps: triggerAriaProps,\n  } = useTriggerProps(variant, remainingProps);\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const { onChange, onInvalid, ariaProps } = useFormFieldValidation(\n    inputRef,\n    { required },\n    triggerAriaProps,\n    id,\n  );\n\n  const errorId = useId();\n\n  const { segments } = useSegments();\n  const stringifiedValue = JSON.stringify(segments);\n\n  const getSegmentValidationState = useCallback(\n    async (trigger: ValidationTrigger): Promise<ValidationState> => {\n      if (inputRef.current && !inputRef.current.validity.valid) {\n        return getI18nValidationState(intl, inputRef.current, trigger);\n      }\n\n      const errorKeys = await Promise.all(segments.map(getErrorKey));\n      return getValidationState(\n        errorKeys.find((key) => key !== null) ?? undefined,\n        trigger,\n      );\n    },\n    [intl, segments],\n  );\n\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => getSegmentValidationState('manual'),\n  );\n\n  const segmentSelectorProps = {\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-testid': dataTestId,\n    style: consumerStyle,\n    className: consumerClassName,\n    ...mergeProps(behavioralTrackingProps, ariaProps),\n  };\n\n  const customTrigger = useMemo(\n    () => getCustomTriggerSlot(remainingProps.children),\n    [remainingProps.children],\n  );\n\n  const {\n    targetRef,\n    triggerRef,\n    overlayRef,\n    overlayState,\n    overlayProps: _overlayProps,\n    overlayTriggerProps,\n    overlayContainerProps,\n  } = useOverlayWithTrigger({\n    placement: 'bottom-start',\n    placementFallbacks: ['bottom-end', 'top-start', 'top-end'],\n    offset: 4,\n    shouldCloseOnBlur: false,\n    onOpenChange: (isOpen) => {\n      if (\n        !isOpen &&\n        !formFieldMessagesState.isTouched &&\n        segmentsClient.hasAccessRights !== false\n      ) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n\n        inputRef.current?.checkValidity();\n        void getSegmentValidationState('blur').then(emitValidationState);\n      }\n\n      if (!isOpen) {\n        validateSegments(\n          segments,\n          onChange,\n          formFieldMessagesDispatch,\n          formFieldMessagesState.formControlMessages,\n          errorId,\n          true,\n        ).catch(() => undefined);\n      }\n\n      onOpenChange?.(isOpen);\n    },\n    additionalElevation: 'overlay',\n    disabled,\n  });\n  const { trapFocus, ...overlayProps } = _overlayProps;\n\n  const { onOpenTooltip, isOpen, textEllipsisRef } = useTooltipHandler(\n    !customTrigger && variant === 'default',\n  );\n  const overlayAriaLabelledById = useId();\n\n  useImperativeHandle(\n    forwardedRef,\n    (): SegmentSelectorRef<HTMLButtonElement> => ({\n      element: internalButtonRef.current,\n      triggerRef: internalButtonRef.current,\n      inputRef: inputRef.current,\n      focus: () => internalButtonRef.current?.focus(),\n      open: overlayState.open,\n      close: overlayState.close,\n      validate: async () => {\n        inputRef.current?.checkValidity();\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        if (segmentsClient.hasAccessRights === false) {\n          formFieldMessagesDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              id: errorId,\n              variant: 'error',\n              validityStateKey: 'customError',\n              messageType: 'formcontrol',\n              showError: true,\n              message: intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.noReadAndWriteAccess,\n              ),\n            },\n          });\n        }\n\n        await validateSegments(\n          segments,\n          onChange,\n          formFieldMessagesDispatch,\n          formFieldMessagesState.formControlMessages,\n          errorId,\n          true,\n        ).catch(() => undefined);\n\n        emitValidationState(await getSegmentValidationState('manual'));\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        inputRef.current?.checkValidity();\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        if (segmentsClient.hasAccessRights === false) {\n          formFieldMessagesDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              id: errorId,\n              variant: 'error',\n              validityStateKey: 'customError',\n              messageType: 'formcontrol',\n              showError: true,\n              message: intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.noReadAndWriteAccess,\n              ),\n            },\n          });\n        }\n\n        await validateSegments(\n          segments,\n          onChange,\n          formFieldMessagesDispatch,\n          formFieldMessagesState.formControlMessages,\n          errorId,\n          true,\n        ).catch(() => undefined);\n\n        const state = await getSegmentValidationState('manual');\n        return emitValidationState(state);\n      },\n    }),\n    [\n      errorId,\n      formFieldMessagesDispatch,\n      formFieldMessagesState.formControlMessages,\n      intl,\n      onChange,\n      emitValidationState,\n      overlayState.close,\n      overlayState.open,\n      segments,\n      getSegmentValidationState,\n    ],\n  );\n\n  const buttonRef = useMergeRefs([triggerRef, targetRef, internalButtonRef]);\n\n  const handleOnBlur = useCallback(() => {\n    if (!overlayState.isOpen) {\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n\n      if (!formFieldMessagesState.isTouched) {\n        inputRef.current?.checkValidity();\n        void getSegmentValidationState('blur').then(emitValidationState);\n      }\n    }\n  }, [\n    overlayState.isOpen,\n    formFieldMessagesDispatch,\n    formFieldMessagesState.isTouched,\n    getSegmentValidationState,\n    emitValidationState,\n  ]);\n\n  // Since the value update is delayed by the async fetching of the data\n  // we need to check the validity as soon as the value is up to date.\n  useEffect(() => {\n    validateSegments(\n      segments,\n      onChange,\n      formFieldMessagesDispatch,\n      formFieldMessagesState.formControlMessages,\n      errorId,\n    ).catch(() => undefined);\n  }, [\n    errorId,\n    formFieldMessagesDispatch,\n    formFieldMessagesState.formControlMessages,\n    onChange,\n    segments,\n    stringifiedValue,\n  ]);\n\n  // Surface validation state whenever the selected segments change (`change`\n  // trigger), keeping `onValidityChange` in sync as the selection is edited.\n  useEffect(() => {\n    void getSegmentValidationState('change').then(emitValidationState);\n    // Fire only on actual segment changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [stringifiedValue]);\n\n  const providerValue = useMemo(\n    () => ({\n      isLoading,\n      displayValue: text,\n      triggerProps: {\n        ...overlayTriggerProps,\n        'data-dt-component': COMPONENT_NAME,\n        onBlur: handleOnBlur,\n      },\n      buttonRef,\n      showError,\n      ...ariaProps,\n    }),\n    [\n      isLoading,\n      text,\n      overlayTriggerProps,\n      buttonRef,\n      showError,\n      ariaProps,\n      handleOnBlur,\n    ],\n  );\n\n  const stratoLogger = useMemo(() => {\n    return createStratoLogger.bind({\n      name,\n      id: propId,\n      ariaLabel: triggerAriaProps['aria-label'],\n    })(COMPONENT_NAME);\n  }, [name, propId, triggerAriaProps]);\n\n  return (\n    <>\n      <SegmentsTriggerContext.Provider value={providerValue}>\n        <Tooltip\n          text={<TooltipMessages ariaLabel={triggerAriaProps['aria-label']} />}\n          className={styles.overwriteTooltipElementPadding}\n          onOpenChange={onOpenTooltip}\n          open={isOpen}\n        >\n          {customTrigger ?? (\n            <SegmentSelectorTrigger\n              textEllipsisRef={textEllipsisRef}\n              {...segmentSelectorProps}\n            />\n          )}\n        </Tooltip>\n        <VisuallyHidden>\n          <input\n            ref={inputRef}\n            id={id}\n            value={segments.length > 0 ? stringifiedValue : ''}\n            onChange={() => undefined}\n            aria-hidden={true}\n            readOnly={readOnly}\n            disabled={disabled}\n            name={name}\n            required={required}\n            tabIndex={-1}\n            aria-disabled={ariaDisabled}\n            onInvalid={onInvalid}\n          />\n        </VisuallyHidden>\n      </SegmentsTriggerContext.Provider>\n\n      {overlayState.isOpen && (\n        <StratoLoggerContext.Provider value={stratoLogger}>\n          <OverlayContainer\n            data-testid={dataTestId}\n            {...overlayContainerProps}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          >\n            <FocusScope autoFocus contain={trapFocus}>\n              <div\n                ref={overlayRef}\n                className={overlayCSS}\n                {...overlayProps}\n                aria-labelledby={overlayAriaLabelledById}\n              >\n                <UISegmentsProvider\n                  readOnly={readOnly}\n                  overlayState={overlayState}\n                >\n                  <SegmentsOverlay labelId={overlayAriaLabelledById} />\n                </UISegmentsProvider>\n              </div>\n            </FocusScope>\n          </OverlayContainer>\n        </StratoLoggerContext.Provider>\n      )}\n    </>\n  );\n});\n\n/**\n * SegmentSelector component that uses a fallback formFieldMessages-context if it wasn't wrapped in a FormField.\n */\nconst SegmentSelectorRoot = withFormFieldMessageContextProvider<\n  SegmentSelectorProps,\n  FormControlWithOverlayRef<HTMLButtonElement>\n>(SegmentSelectorFwd);\n\n/**\n * Use the `SegmentSelector` as a top-level filter to narrow data by segment, setting the scope for any additional filters applied alongside it.\n * @public\n */\nexport const SegmentSelector = Object.assign(SegmentSelectorRoot, {\n  CustomTrigger,\n});\n\n(\n  SegmentSelector as typeof SegmentSelector & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["\uFEFFimport {\n  Children,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport { useInternalFormRegistration } from '../../forms/form/hooks/useInternalFormRegistration.js';\nimport { useFormControl } from '../../forms/forms-core/hooks/useFormControl.js';\nimport { FormFieldMessagesAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlWithOverlayRef } from '../../forms/shared-types.js';\nimport { segmentsClient } from './contexts/SegmentsCache/SegmentsCache.js';\nimport { SegmentsTriggerContext } from './contexts/SegmentsUI/SegmentsTriggerContext.js';\nimport { UISegmentsProvider } from './contexts/SegmentsUI/SegmentsUIContext.js';\nimport {\n  getErrorKey,\n  validateSegments,\n} from './contexts/SegmentsUI/segmentValidationHelper.js';\nimport { CustomTrigger } from './CustomTrigger.js';\nimport { useSegments } from './hooks/useSegments.js';\nimport { useTooltipHandler } from './hooks/useTooltipHandler.js';\nimport { useTriggerProps } from './hooks/useTriggerProps.js';\nimport { SegmentsOverlay } from './parts/Overlay.js';\nimport { SegmentSelectorTrigger } from './parts/selectionBar/SegmentSelectorTrigger.js';\nimport { TooltipMessages } from './parts/TooltipMessages.js';\nimport { SEGMENTSELECTOR_MESSAGES } from './segmentMessages.js';\nimport * as styles from './SegmentSelector.sty.js';\nimport type {\n  SegmentSelectorProps,\n  SegmentSelectorRef,\n} from './SegmentSelector.types.js';\nimport { FocusScope } from '../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../core/components/OverlayContainer.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { createStratoLogger } from '../../core/sdk/sdk-logger.js';\nimport { StratoLoggerContext } from '../../core/sdk/StratoLoggerContext.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { withFormFieldMessageContextProvider } from '../../forms/forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../../forms/forms-core/hooks/useFormFieldValidation.js';\nimport type {\n  ValidationState,\n  ValidationTrigger,\n} from '../../forms/validation/types.js';\nimport { useCustomMessageEmitter } from '../../forms/validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../../forms/validation/useValidationStateEmitter.js';\nimport { getValidationState } from '../../forms/validation/validation-builders.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { overlayCSS } from '../../overlays/overlay/Overlay.sty.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\n\nconst COMPONENT_NAME = 'SegmentSelector';\n\n/** Iterates over child nodes to extract the content component slot. */\nfunction getCustomTriggerSlot(children: ReactNode) {\n  let customTrigger: ReactElement | undefined;\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case CustomTrigger:\n          customTrigger = child;\n          break;\n        default: {\n          if (isDev()) {\n            // eslint-disable-next-line no-console\n            console.warn(\n              'Only CustomTrigger is a valid child of the SegmentSelector.',\n            );\n          }\n          break;\n        }\n      }\n    } else if (child && isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn('The used child is not supported by the SegmentSelector.');\n    }\n  });\n\n  return customTrigger;\n}\n\nconst SegmentSelectorFwd = forwardRef<\n  SegmentSelectorRef<HTMLButtonElement>,\n  SegmentSelectorProps\n>((props, forwardedRef) => {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    id: propId,\n    'data-testid': dataTestId,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dtrum-mask': dataDtrumMask,\n    variant = 'default',\n    onOpenChange,\n    onValidityChange,\n    readOnly: propReadOnly,\n    disabled: propDisabled,\n    required: propRequired,\n    name,\n    _form,\n    _messageTarget,\n    ...remainingProps\n  }: SegmentSelectorProps = props;\n\n  const intl = useIntl();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const internalButtonRef = useRef<HTMLButtonElement>(null);\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n\n  const {\n    disabled,\n    required,\n    id,\n    ariaDisabled,\n    readOnly,\n    showError,\n    messageState: formFieldMessagesState,\n    messageDispatch: formFieldMessagesDispatch,\n  } = useFormControl({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: remainingProps['aria-disabled'],\n    propReadOnly,\n  });\n\n  const {\n    isLoading,\n    text,\n    ariaProps: triggerAriaProps,\n  } = useTriggerProps(variant, remainingProps);\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const { onChange, onInvalid, ariaProps } = useFormFieldValidation(\n    inputRef,\n    { required },\n    triggerAriaProps,\n    id,\n  );\n\n  const errorId = useId();\n\n  const { segments } = useSegments();\n  const stringifiedValue = JSON.stringify(segments);\n\n  const getSegmentValidationState = useCallback(\n    async (trigger: ValidationTrigger): Promise<ValidationState> => {\n      if (inputRef.current && !inputRef.current.validity.valid) {\n        return getI18nValidationState(intl, inputRef.current, trigger);\n      }\n\n      const errorKeys = await Promise.all(segments.map(getErrorKey));\n      return getValidationState(\n        errorKeys.find((key) => key !== null) ?? undefined,\n        trigger,\n        undefined,\n        id,\n      );\n    },\n    [id, intl, segments],\n  );\n\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => getSegmentValidationState('manual'),\n  );\n\n  const runValidation = useCallback(async () => {\n    formFieldMessagesDispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: true },\n    });\n    if (segmentsClient.hasAccessRights === false) {\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.ADDMESSAGE,\n        payload: {\n          id: errorId,\n          variant: 'error',\n          validityStateKey: 'customError',\n          messageType: 'formcontrol',\n          showError: true,\n          message: intl.formatMessage(\n            SEGMENTSELECTOR_MESSAGES.noReadAndWriteAccess,\n          ),\n        },\n      });\n    }\n    await validateSegments(\n      segments,\n      onChange,\n      formFieldMessagesDispatch,\n      formFieldMessagesState.formControlMessages,\n      errorId,\n      true,\n    ).catch(() => undefined);\n  }, [\n    errorId,\n    formFieldMessagesDispatch,\n    formFieldMessagesState.formControlMessages,\n    intl,\n    onChange,\n    segments,\n  ]);\n\n  const formControl = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    value: segments.length > 0 ? stringifiedValue : '',\n    onValidityChange,\n    focus: () => internalButtonRef.current?.focus(),\n    validateField: async ({ reveal, trigger }) => {\n      inputRef.current?.checkValidity();\n      if (reveal) {\n        await runValidation();\n      }\n      const validationState = await getSegmentValidationState(trigger);\n      return emitValidationState(validationState);\n    },\n    resetValidation: () => {\n      inputRef.current?.setCustomValidity('');\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false, resetShowError: true },\n      });\n    },\n  });\n  formValidityChangeRef.current = formControl.onValidityChange;\n\n  const segmentSelectorProps = {\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-testid': dataTestId,\n    style: consumerStyle,\n    className: consumerClassName,\n    ...mergeProps(behavioralTrackingProps, ariaProps),\n  };\n\n  const customTrigger = useMemo(\n    () => getCustomTriggerSlot(remainingProps.children),\n    [remainingProps.children],\n  );\n\n  const {\n    targetRef,\n    triggerRef,\n    overlayRef,\n    overlayState,\n    overlayProps: _overlayProps,\n    overlayTriggerProps,\n    overlayContainerProps,\n  } = useOverlayWithTrigger({\n    placement: 'bottom-start',\n    placementFallbacks: ['bottom-end', 'top-start', 'top-end'],\n    offset: 4,\n    shouldCloseOnBlur: false,\n    onOpenChange: (isOpen) => {\n      if (\n        !isOpen &&\n        !formFieldMessagesState.isTouched &&\n        segmentsClient.hasAccessRights !== false\n      ) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n\n        inputRef.current?.checkValidity();\n        void getSegmentValidationState('blur').then(emitValidationState);\n      }\n\n      if (!isOpen) {\n        validateSegments(\n          segments,\n          onChange,\n          formFieldMessagesDispatch,\n          formFieldMessagesState.formControlMessages,\n          errorId,\n          true,\n        ).catch(() => undefined);\n      }\n\n      if (isOpen) {\n        void segmentsClient.queryClient.invalidateQueries({\n          queryKey: ['getAllSegments'],\n        });\n        void segmentsClient.queryClient.invalidateQueries({\n          queryKey: ['getSegment'],\n        });\n        void segmentsClient.queryClient.invalidateQueries({\n          queryKey: ['errorKey'],\n        });\n        void segmentsClient.queryClient.invalidateQueries({\n          queryKey: ['getSegmentVariables'],\n        });\n      }\n\n      onOpenChange?.(isOpen);\n    },\n    additionalElevation: 'overlay',\n    disabled,\n  });\n  const { trapFocus, ...overlayProps } = _overlayProps;\n\n  const { onOpenTooltip, isOpen, textEllipsisRef } = useTooltipHandler(\n    !customTrigger && variant === 'default',\n  );\n  const overlayAriaLabelledById = useId();\n\n  useImperativeHandle(\n    forwardedRef,\n    (): SegmentSelectorRef<HTMLButtonElement> => ({\n      element: internalButtonRef.current,\n      triggerRef: internalButtonRef.current,\n      inputRef: inputRef.current,\n      focus: () => internalButtonRef.current?.focus(),\n      open: overlayState.open,\n      close: overlayState.close,\n      validate: async () => {\n        inputRef.current?.checkValidity();\n        await runValidation();\n\n        emitValidationState(await getSegmentValidationState('manual'));\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        inputRef.current?.checkValidity();\n        await runValidation();\n\n        const state = await getSegmentValidationState('manual');\n        return emitValidationState(state);\n      },\n    }),\n    [\n      runValidation,\n      emitValidationState,\n      overlayState.close,\n      overlayState.open,\n      getSegmentValidationState,\n    ],\n  );\n\n  const buttonRef = useMergeRefs([triggerRef, targetRef, internalButtonRef]);\n\n  const handleOnBlur = useCallback(() => {\n    if (!overlayState.isOpen) {\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n\n      if (!formFieldMessagesState.isTouched) {\n        inputRef.current?.checkValidity();\n        void getSegmentValidationState('blur').then(emitValidationState);\n      }\n    }\n  }, [\n    overlayState.isOpen,\n    formFieldMessagesDispatch,\n    formFieldMessagesState.isTouched,\n    getSegmentValidationState,\n    emitValidationState,\n  ]);\n\n  // Since the value update is delayed by the async fetching of the data\n  // we need to check the validity as soon as the value is up to date.\n  useEffect(() => {\n    validateSegments(\n      segments,\n      onChange,\n      formFieldMessagesDispatch,\n      formFieldMessagesState.formControlMessages,\n      errorId,\n    ).catch(() => undefined);\n  }, [\n    errorId,\n    formFieldMessagesDispatch,\n    formFieldMessagesState.formControlMessages,\n    onChange,\n    segments,\n    stringifiedValue,\n  ]);\n\n  // Surface validation state whenever the selected segments change (`change`\n  // trigger), keeping `onValidityChange` in sync as the selection is edited.\n  useEffect(() => {\n    void getSegmentValidationState('change').then(emitValidationState);\n    // Fire only on actual segment changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [stringifiedValue]);\n\n  const providerValue = useMemo(\n    () => ({\n      isLoading,\n      displayValue: text,\n      triggerProps: {\n        ...overlayTriggerProps,\n        'data-dt-component': COMPONENT_NAME,\n        onBlur: handleOnBlur,\n      },\n      buttonRef,\n      showError,\n      ...ariaProps,\n    }),\n    [\n      isLoading,\n      text,\n      overlayTriggerProps,\n      buttonRef,\n      showError,\n      ariaProps,\n      handleOnBlur,\n    ],\n  );\n\n  const stratoLogger = useMemo(() => {\n    return createStratoLogger.bind({\n      name,\n      id: propId,\n      ariaLabel: triggerAriaProps['aria-label'],\n    })(COMPONENT_NAME);\n  }, [name, propId, triggerAriaProps]);\n\n  return (\n    <>\n      <SegmentsTriggerContext.Provider value={providerValue}>\n        <Tooltip\n          text={<TooltipMessages ariaLabel={triggerAriaProps['aria-label']} />}\n          className={styles.overwriteTooltipElementPadding}\n          onOpenChange={onOpenTooltip}\n          open={isOpen}\n        >\n          {customTrigger ?? (\n            <SegmentSelectorTrigger\n              textEllipsisRef={textEllipsisRef}\n              {...segmentSelectorProps}\n            />\n          )}\n        </Tooltip>\n        <VisuallyHidden>\n          <input\n            ref={inputRef}\n            id={id}\n            value={segments.length > 0 ? stringifiedValue : ''}\n            onChange={() => undefined}\n            aria-hidden={true}\n            readOnly={readOnly}\n            disabled={disabled}\n            name={name}\n            form={_form}\n            required={required}\n            tabIndex={-1}\n            aria-disabled={ariaDisabled}\n            onInvalid={onInvalid}\n          />\n        </VisuallyHidden>\n      </SegmentsTriggerContext.Provider>\n\n      {overlayState.isOpen && (\n        <StratoLoggerContext.Provider value={stratoLogger}>\n          <OverlayContainer\n            data-testid={dataTestId}\n            {...overlayContainerProps}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          >\n            <FocusScope autoFocus contain={trapFocus}>\n              <div\n                ref={overlayRef}\n                className={overlayCSS}\n                {...overlayProps}\n                aria-labelledby={overlayAriaLabelledById}\n              >\n                <UISegmentsProvider\n                  readOnly={readOnly}\n                  overlayState={overlayState}\n                >\n                  <SegmentsOverlay labelId={overlayAriaLabelledById} />\n                </UISegmentsProvider>\n              </div>\n            </FocusScope>\n          </OverlayContainer>\n        </StratoLoggerContext.Provider>\n      )}\n    </>\n  );\n});\n\n/**\n * SegmentSelector component that uses a fallback formFieldMessages-context if it wasn't wrapped in a FormField.\n */\nconst SegmentSelectorRoot = withFormFieldMessageContextProvider<\n  SegmentSelectorProps,\n  FormControlWithOverlayRef<HTMLButtonElement>\n>(SegmentSelectorFwd);\n\n/**\n * Use the `SegmentSelector` as a top-level filter to narrow data by segment, setting the scope for any additional filters applied alongside it.\n * @public\n */\nexport const SegmentSelector = Object.assign(SegmentSelectorRoot, {\n  CustomTrigger,\n});\n\n(\n  SegmentSelector as typeof SegmentSelector & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": ["isOpen"]
 }

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

@@ -1,8 +1,8 @@
 import "./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";
 export {
   overwriteTooltipElementPadding,
   segmentSelectorList,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/segment-selector/SegmentSelector.css.ts"],
-  "sourcesContent": ["import './SegmentSelector.css';\nexport var overwriteTooltipElementPadding = '_11m6jkl3-3-10-4';\nexport var segmentSelectorList = '_11m6jkl0-3-10-4';\nexport var segmentSelectorListItem = '_11m6jkl1-3-10-4';\nexport var tooltipMaxHeight = '_11m6jkl2-3-10-4';"],
+  "sourcesContent": ["import './SegmentSelector.css';\nexport var overwriteTooltipElementPadding = '_11m6jkl3-3-11-0';\nexport var segmentSelectorList = '_11m6jkl0-3-11-0';\nexport var segmentSelectorListItem = '_11m6jkl1-3-11-0';\nexport var tooltipMaxHeight = '_11m6jkl2-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iCAAiC;AACrC,IAAI,sBAAsB;AAC1B,IAAI,0BAA0B;AAC9B,IAAI,mBAAmB;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/contexts/SegmentsCache/SegmentsCache.tsx"],
-  "sourcesContent": ["import { QueryClient } from '@tanstack/react-query';\n\nimport { getCurrentUserDetails } from '@dynatrace-sdk/app-environment';\nimport {\n  filterSegmentsClient,\n  type FilterSegment,\n  type DetailedFilterSegment,\n} from '@dynatrace-sdk/client-filter-segment-management';\n\n/**\n * React-query's queryClient to coordinate queries.\n * @internal\n */\nconst segmentQueryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false,\n      refetchOnMount: true,\n      retry: false,\n      staleTime: Infinity,\n    },\n  },\n});\n\nexport type CachedSegment = {\n  segment: Omit<DetailedFilterSegment, 'uid'> & { id: string };\n  temporarilyApplied: boolean;\n};\n\nconst currentUser = getCurrentUserDetails();\n\nfunction catchError(error: Error) {\n  if (error.name === '403' || error.message === '403') {\n    segmentsClient.hasAccessRights = false;\n    segmentsClient.queryClient.setDefaultOptions({\n      queries: { enabled: false },\n    });\n  }\n}\n\n/**\n * @internal\n */\nexport const segmentsClient: {\n  queryClient: QueryClient;\n  hasAccessRights: boolean | undefined;\n} = {\n  /** react-query's queryClient used for segments queries. */\n  queryClient: segmentQueryClient,\n  /** flag for missing access rights (403) for any segments query. */\n  hasAccessRights: undefined,\n};\n\nfunction processSegment(\n  segment: DetailedFilterSegment | FilterSegment,\n): CachedSegment {\n  const { uid, ...remainingSegment } = segment;\n\n  return {\n    segment: { ...remainingSegment, id: uid },\n    temporarilyApplied: !(segment.isPublic || segment.owner === currentUser.id),\n  };\n}\n\n/**\n * Returns a Promise<CachedSegment> with VARIABLES and INCLUDES always populated.\n * The single-segment endpoint always returns INCLUDES; the bulk (getAllSegments)\n * endpoint never does. A cached result is reused only when it already contains\n * INCLUDES (i.e. it came from a prior direct fetch), otherwise a fresh\n * getFilterSegment call is made.\n * @internal\n */\nexport async function getSegment(uid?: string): Promise<CachedSegment> {\n  if (!uid) {\n    throw new Error('Segment id is required');\n  }\n\n  if (segmentsClient.hasAccessRights === false) {\n    throw new Error('403');\n  }\n\n  return new Promise<CachedSegment>((resolve, reject) => {\n    filterSegmentsClient\n      .getFilterSegment({\n        filterSegmentUid: uid,\n        addFields: ['VARIABLES', 'INCLUDES'],\n      })\n      .then((storeSegment) => {\n        const newCachedSegment = processSegment(storeSegment);\n        segmentsClient.hasAccessRights = true;\n        resolve(newCachedSegment);\n      })\n      .catch((error: Error) => {\n        catchError(error);\n        reject(error);\n        return null;\n      });\n  });\n}\n\n/**\n * Returns a Promise for all Cached Segments.\n * @internal\n */\nasync function getAllSegments() {\n  if (segmentsClient.hasAccessRights === false) {\n    throw new Error('403');\n  }\n\n  return new Promise<Map<string, CachedSegment>>((resolve, reject) => {\n    filterSegmentsClient\n      .getFilterSegments({\n        addFields: ['VARIABLES'],\n      })\n      .then((segments) => {\n        const updatedCache = new Map();\n        segments.filterSegments.forEach((storeSegment) => {\n          const newCachedSegment = processSegment(storeSegment);\n          updatedCache.set(storeSegment.uid, newCachedSegment);\n          segmentsClient.hasAccessRights = true;\n        });\n\n        resolve(updatedCache);\n      })\n      .catch((error: Error) => {\n        catchError(error);\n        reject(error);\n      });\n  });\n}\n\n/**\n * Hook to access cached segments.\n * @internal\n * @returns\n */\nexport function useSegmentsCache() {\n  return {\n    getAllSegments,\n    getSegment,\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,OAGK;AAMP,MAAM,qBAAqB,IAAI,YAAY;AAAA,EACzC,gBAAgB;AAAA,IACd,SAAS;AAAA,MACP,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAOD,MAAM,cAAc,sBAAsB;AAE1C,SAAS,WAAW,OAAc;AAChC,MAAI,MAAM,SAAS,SAAS,MAAM,YAAY,OAAO;AACnD,mBAAe,kBAAkB;AACjC,mBAAe,YAAY,kBAAkB;AAAA,MAC3C,SAAS,EAAE,SAAS,MAAM;AAAA,IAC5B,CAAC;AAAA,EACH;AACF;AAKO,MAAM,iBAGT;AAAA;AAAA,EAEF,aAAa;AAAA;AAAA,EAEb,iBAAiB;AACnB;AAEA,SAAS,eACP,SACe;AACf,QAAM,EAAE,KAAK,GAAG,iBAAiB,IAAI;AAErC,SAAO;AAAA,IACL,SAAS,EAAE,GAAG,kBAAkB,IAAI,IAAI;AAAA,IACxC,oBAAoB,EAAE,QAAQ,YAAY,QAAQ,UAAU,YAAY;AAAA,EAC1E;AACF;AAUA,eAAsB,WAAW,KAAsC;AACrE,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEA,MAAI,eAAe,oBAAoB,OAAO;AAC5C,UAAM,IAAI,MAAM,KAAK;AAAA,EACvB;AAEA,SAAO,IAAI,QAAuB,CAAC,SAAS,WAAW;AACrD,yBACG,iBAAiB;AAAA,MAChB,kBAAkB;AAAA,MAClB,WAAW,CAAC,aAAa,UAAU;AAAA,IACrC,CAAC,EACA,KAAK,CAAC,iBAAiB;AACtB,YAAM,mBAAmB,eAAe,YAAY;AACpD,qBAAe,kBAAkB;AACjC,cAAQ,gBAAgB;AAAA,IAC1B,CAAC,EACA,MAAM,CAAC,UAAiB;AACvB,iBAAW,KAAK;AAChB,aAAO,KAAK;AACZ,aAAO;AAAA,IACT,CAAC;AAAA,EACL,CAAC;AACH;AAMA,eAAe,iBAAiB;AAC9B,MAAI,eAAe,oBAAoB,OAAO;AAC5C,UAAM,IAAI,MAAM,KAAK;AAAA,EACvB;AAEA,SAAO,IAAI,QAAoC,CAAC,SAAS,WAAW;AAClE,yBACG,kBAAkB;AAAA,MACjB,WAAW,CAAC,WAAW;AAAA,IACzB,CAAC,EACA,KAAK,CAAC,aAAa;AAClB,YAAM,eAAe,oBAAI,IAAI;AAC7B,eAAS,eAAe,QAAQ,CAAC,iBAAiB;AAChD,cAAM,mBAAmB,eAAe,YAAY;AACpD,qBAAa,IAAI,aAAa,KAAK,gBAAgB;AACnD,uBAAe,kBAAkB;AAAA,MACnC,CAAC;AAED,cAAQ,YAAY;AAAA,IACtB,CAAC,EACA,MAAM,CAAC,UAAiB;AACvB,iBAAW,KAAK;AAChB,aAAO,KAAK;AAAA,IACd,CAAC;AAAA,EACL,CAAC;AACH;AAOO,SAAS,mBAAmB;AACjC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { QueryClient } from '@tanstack/react-query';\n\nimport { getCurrentUserDetails } from '@dynatrace-sdk/app-environment';\nimport {\n  filterSegmentsClient,\n  type FilterSegment,\n  type DetailedFilterSegment,\n} from '@dynatrace-sdk/client-filter-segment-management';\n\n/**\n * React-query's queryClient to coordinate queries.\n * @internal\n */\nconst segmentQueryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false,\n      refetchOnMount: true,\n      retry: false,\n      staleTime: 60 * 1000, // 1 minute\n    },\n  },\n});\n\nexport type CachedSegment = {\n  segment: Omit<DetailedFilterSegment, 'uid'> & { id: string };\n  temporarilyApplied: boolean;\n};\n\nconst currentUser = getCurrentUserDetails();\n\nfunction catchError(error: Error) {\n  if (error.name === '403' || error.message === '403') {\n    segmentsClient.hasAccessRights = false;\n    segmentsClient.queryClient.setDefaultOptions({\n      queries: { enabled: false },\n    });\n  }\n}\n\n/**\n * @internal\n */\nexport const segmentsClient: {\n  queryClient: QueryClient;\n  hasAccessRights: boolean | undefined;\n} = {\n  /** react-query's queryClient used for segments queries. */\n  queryClient: segmentQueryClient,\n  /** flag for missing access rights (403) for any segments query. */\n  hasAccessRights: undefined,\n};\n\nfunction processSegment(\n  segment: DetailedFilterSegment | FilterSegment,\n): CachedSegment {\n  const { uid, ...remainingSegment } = segment;\n\n  return {\n    segment: { ...remainingSegment, id: uid },\n    temporarilyApplied: !(segment.isPublic || segment.owner === currentUser.id),\n  };\n}\n\n/**\n * Returns a Promise<CachedSegment> with VARIABLES and INCLUDES always populated.\n * The single-segment endpoint always returns INCLUDES; the bulk (getAllSegments)\n * endpoint never does. A cached result is reused only when it already contains\n * INCLUDES (i.e. it came from a prior direct fetch), otherwise a fresh\n * getFilterSegment call is made.\n * @internal\n */\nexport async function getSegment(uid?: string): Promise<CachedSegment> {\n  if (!uid) {\n    throw new Error('Segment id is required');\n  }\n\n  if (segmentsClient.hasAccessRights === false) {\n    throw new Error('403');\n  }\n\n  return new Promise<CachedSegment>((resolve, reject) => {\n    filterSegmentsClient\n      .getFilterSegment({\n        filterSegmentUid: uid,\n        addFields: ['VARIABLES', 'INCLUDES'],\n      })\n      .then((storeSegment) => {\n        const newCachedSegment = processSegment(storeSegment);\n        segmentsClient.hasAccessRights = true;\n        resolve(newCachedSegment);\n      })\n      .catch((error: Error) => {\n        catchError(error);\n        reject(error);\n        return null;\n      });\n  });\n}\n\n/**\n * Returns a Promise for all Cached Segments.\n * @internal\n */\nasync function getAllSegments() {\n  if (segmentsClient.hasAccessRights === false) {\n    throw new Error('403');\n  }\n\n  return new Promise<Map<string, CachedSegment>>((resolve, reject) => {\n    filterSegmentsClient\n      .getFilterSegments({\n        addFields: ['VARIABLES'],\n      })\n      .then((segments) => {\n        const updatedCache = new Map();\n        segments.filterSegments.forEach((storeSegment) => {\n          const newCachedSegment = processSegment(storeSegment);\n          updatedCache.set(storeSegment.uid, newCachedSegment);\n          segmentsClient.hasAccessRights = true;\n        });\n\n        resolve(updatedCache);\n      })\n      .catch((error: Error) => {\n        catchError(error);\n        reject(error);\n      });\n  });\n}\n\n/**\n * Hook to access cached segments.\n * @internal\n * @returns\n */\nexport function useSegmentsCache() {\n  return {\n    getAllSegments,\n    getSegment,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,OAGK;AAMP,MAAM,qBAAqB,IAAI,YAAY;AAAA,EACzC,gBAAgB;AAAA,IACd,SAAS;AAAA,MACP,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,WAAW,KAAK;AAAA;AAAA,IAClB;AAAA,EACF;AACF,CAAC;AAOD,MAAM,cAAc,sBAAsB;AAE1C,SAAS,WAAW,OAAc;AAChC,MAAI,MAAM,SAAS,SAAS,MAAM,YAAY,OAAO;AACnD,mBAAe,kBAAkB;AACjC,mBAAe,YAAY,kBAAkB;AAAA,MAC3C,SAAS,EAAE,SAAS,MAAM;AAAA,IAC5B,CAAC;AAAA,EACH;AACF;AAKO,MAAM,iBAGT;AAAA;AAAA,EAEF,aAAa;AAAA;AAAA,EAEb,iBAAiB;AACnB;AAEA,SAAS,eACP,SACe;AACf,QAAM,EAAE,KAAK,GAAG,iBAAiB,IAAI;AAErC,SAAO;AAAA,IACL,SAAS,EAAE,GAAG,kBAAkB,IAAI,IAAI;AAAA,IACxC,oBAAoB,EAAE,QAAQ,YAAY,QAAQ,UAAU,YAAY;AAAA,EAC1E;AACF;AAUA,eAAsB,WAAW,KAAsC;AACrE,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEA,MAAI,eAAe,oBAAoB,OAAO;AAC5C,UAAM,IAAI,MAAM,KAAK;AAAA,EACvB;AAEA,SAAO,IAAI,QAAuB,CAAC,SAAS,WAAW;AACrD,yBACG,iBAAiB;AAAA,MAChB,kBAAkB;AAAA,MAClB,WAAW,CAAC,aAAa,UAAU;AAAA,IACrC,CAAC,EACA,KAAK,CAAC,iBAAiB;AACtB,YAAM,mBAAmB,eAAe,YAAY;AACpD,qBAAe,kBAAkB;AACjC,cAAQ,gBAAgB;AAAA,IAC1B,CAAC,EACA,MAAM,CAAC,UAAiB;AACvB,iBAAW,KAAK;AAChB,aAAO,KAAK;AACZ,aAAO;AAAA,IACT,CAAC;AAAA,EACL,CAAC;AACH;AAMA,eAAe,iBAAiB;AAC9B,MAAI,eAAe,oBAAoB,OAAO;AAC5C,UAAM,IAAI,MAAM,KAAK;AAAA,EACvB;AAEA,SAAO,IAAI,QAAoC,CAAC,SAAS,WAAW;AAClE,yBACG,kBAAkB;AAAA,MACjB,WAAW,CAAC,WAAW;AAAA,IACzB,CAAC,EACA,KAAK,CAAC,aAAa;AAClB,YAAM,eAAe,oBAAI,IAAI;AAC7B,eAAS,eAAe,QAAQ,CAAC,iBAAiB;AAChD,cAAM,mBAAmB,eAAe,YAAY;AACpD,qBAAa,IAAI,aAAa,KAAK,gBAAgB;AACnD,uBAAe,kBAAkB;AAAA,MACnC,CAAC;AAED,cAAQ,YAAY;AAAA,IACtB,CAAC,EACA,MAAM,CAAC,UAAiB;AACvB,iBAAW,KAAK;AAChB,aAAO,KAAK;AAAA,IACd,CAAC;AAAA,EACL,CAAC;AACH;AAOO,SAAS,mBAAmB;AACjC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -44,6 +44,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,
@@ -51,7 +54,8 @@ const useSegmentsUIContext = () => {
     updateUISegment,
     clearPlaceholder,
     setUISegments,
-    setArrayIdentifierError
+    setArrayIdentifierError,
+    setUnavailableVariables
   };
 };
 const UISegmentsProvider = (props) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/contexts/SegmentsUI/SegmentsUIContext.tsx"],
-  "sourcesContent": ["import {\n  createContext,\n  useContext,\n  useMemo,\n  useReducer,\n  type PropsWithChildren,\n} from 'react';\n\nimport { UISegmentsDispatchContext } from './SegmentsUIDispatchContext.js';\nimport {\n  segmentsUIReducer,\n  type SegmentSelectorUIState,\n} from './SegmentsUIReducer.js';\nimport type { UISegment } from './UISegments.types.js';\nimport type { OverlayTriggerState } from '../../../../overlays/hooks/useOverlay.js';\nimport { useSegments } from '../../hooks/useSegments.js';\n\n/** @internal */\nexport const UISegmentsContext = createContext<SegmentSelectorUIState>({\n  uiSegments: [],\n  hasSelection: false,\n  readOnly: false,\n  isTouched: false,\n});\n\n/** @internal */\nexport const useSegmentsUIContext = () => {\n  const { dispatch } = useContext(UISegmentsDispatchContext);\n\n  function addUISegment(\n    newSegment?: UISegment,\n    isPlaceholder: boolean = false,\n  ) {\n    dispatch({\n      type: 'add',\n      payload: { segments: newSegment, isPlaceholder },\n    });\n  }\n\n  function removeUISegment(id?: string | null) {\n    if (id) {\n      dispatch({ type: 'remove', payload: { id } });\n    }\n  }\n\n  function removeAllUISegments() {\n    dispatch({ type: 'removeAll' });\n  }\n\n  function updateUISegment(oldSegment: UISegment, newSegment: UISegment) {\n    dispatch({ type: 'update', payload: { newSegment, oldSegment } });\n  }\n\n  function clearPlaceholder() {\n    dispatch({ type: 'clearPlaceholder' });\n  }\n\n  function setUISegments(\n    uiSegments: SegmentSelectorUIState['uiSegments'],\n    hasSelection?: boolean,\n  ) {\n    dispatch({ type: 'setUISegments', payload: { uiSegments, hasSelection } });\n  }\n\n  function setArrayIdentifierError(hasError: boolean, id: string) {\n    dispatch({ type: 'setArrayIdentifierError', payload: { hasError, id } });\n  }\n\n  return {\n    removeAllUISegments,\n    removeUISegment,\n    addUISegment,\n    updateUISegment,\n    clearPlaceholder,\n    setUISegments,\n    setArrayIdentifierError,\n  };\n};\n\n/**\n * Provider for the UISegments context that stores the selected segments in the proper order.\n * @param props - children only\n * @internal\n */\nexport const UISegmentsProvider = (\n  props: PropsWithChildren<{\n    readOnly?: boolean;\n    overlayState: OverlayTriggerState;\n  }>,\n) => {\n  const { children, readOnly, overlayState } = props;\n  const { segments } = useSegments();\n\n  const hasSelection = segments.length > 0;\n  const id = segments[0]?.id ?? crypto.randomUUID();\n\n  const [state, dispatch] = useReducer(segmentsUIReducer, {\n    uiSegments: hasSelection ? segments : [{ id, isPlaceholder: true }],\n    hasSelection,\n    readOnly,\n    focusedSegmentId: id,\n    isTouched: false,\n  });\n\n  const dispatchContext = useMemo(\n    () => ({ dispatch, overlayState }),\n    [dispatch, overlayState],\n  );\n\n  return (\n    <UISegmentsContext.Provider value={state}>\n      <UISegmentsDispatchContext.Provider value={dispatchContext}>\n        {children}\n      </UISegmentsDispatchContext.Provider>\n    </UISegmentsContext.Provider>\n  );\n};\n"],
-  "mappings": "AA+GM;AA/GN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,iCAAiC;AAC1C;AAAA,EACE;AAAA,OAEK;AAGP,SAAS,mBAAmB;AAGrB,MAAM,oBAAoB,cAAsC;AAAA,EACrE,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AACb,CAAC;AAGM,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,SAAS,IAAI,WAAW,yBAAyB;AAEzD,WAAS,aACP,YACA,gBAAyB,OACzB;AACA,aAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,EAAE,UAAU,YAAY,cAAc;AAAA,IACjD,CAAC;AAAA,EACH;AAEA,WAAS,gBAAgB,IAAoB;AAC3C,QAAI,IAAI;AACN,eAAS,EAAE,MAAM,UAAU,SAAS,EAAE,GAAG,EAAE,CAAC;AAAA,IAC9C;AAAA,EACF;AAEA,WAAS,sBAAsB;AAC7B,aAAS,EAAE,MAAM,YAAY,CAAC;AAAA,EAChC;AAEA,WAAS,gBAAgB,YAAuB,YAAuB;AACrE,aAAS,EAAE,MAAM,UAAU,SAAS,EAAE,YAAY,WAAW,EAAE,CAAC;AAAA,EAClE;AAEA,WAAS,mBAAmB;AAC1B,aAAS,EAAE,MAAM,mBAAmB,CAAC;AAAA,EACvC;AAEA,WAAS,cACP,YACA,cACA;AACA,aAAS,EAAE,MAAM,iBAAiB,SAAS,EAAE,YAAY,aAAa,EAAE,CAAC;AAAA,EAC3E;AAEA,WAAS,wBAAwB,UAAmB,IAAY;AAC9D,aAAS,EAAE,MAAM,2BAA2B,SAAS,EAAE,UAAU,GAAG,EAAE,CAAC;AAAA,EACzE;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAOO,MAAM,qBAAqB,CAChC,UAIG;AACH,QAAM,EAAE,UAAU,UAAU,aAAa,IAAI;AAC7C,QAAM,EAAE,SAAS,IAAI,YAAY;AAEjC,QAAM,eAAe,SAAS,SAAS;AACvC,QAAM,KAAK,SAAS,CAAC,GAAG,MAAM,OAAO,WAAW;AAEhD,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,mBAAmB;AAAA,IACtD,YAAY,eAAe,WAAW,CAAC,EAAE,IAAI,eAAe,KAAK,CAAC;AAAA,IAClE;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,WAAW;AAAA,EACb,CAAC;AAED,QAAM,kBAAkB;AAAA,IACtB,OAAO,EAAE,UAAU,aAAa;AAAA,IAChC,CAAC,UAAU,YAAY;AAAA,EACzB;AAEA,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,OACjC,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,iBACxC,UACH,GACF;AAEJ;",
+  "sourcesContent": ["import {\n  createContext,\n  useContext,\n  useMemo,\n  useReducer,\n  type PropsWithChildren,\n} from 'react';\n\nimport { UISegmentsDispatchContext } from './SegmentsUIDispatchContext.js';\nimport {\n  segmentsUIReducer,\n  type SegmentSelectorUIState,\n} from './SegmentsUIReducer.js';\nimport type { UISegment } from './UISegments.types.js';\nimport type { OverlayTriggerState } from '../../../../overlays/hooks/useOverlay.js';\nimport { useSegments } from '../../hooks/useSegments.js';\n\n/** @internal */\nexport const UISegmentsContext = createContext<SegmentSelectorUIState>({\n  uiSegments: [],\n  hasSelection: false,\n  readOnly: false,\n  isTouched: false,\n});\n\n/** @internal */\nexport const useSegmentsUIContext = () => {\n  const { dispatch } = useContext(UISegmentsDispatchContext);\n\n  function addUISegment(\n    newSegment?: UISegment,\n    isPlaceholder: boolean = false,\n  ) {\n    dispatch({\n      type: 'add',\n      payload: { segments: newSegment, isPlaceholder },\n    });\n  }\n\n  function removeUISegment(id?: string | null) {\n    if (id) {\n      dispatch({ type: 'remove', payload: { id } });\n    }\n  }\n\n  function removeAllUISegments() {\n    dispatch({ type: 'removeAll' });\n  }\n\n  function updateUISegment(oldSegment: UISegment, newSegment: UISegment) {\n    dispatch({ type: 'update', payload: { newSegment, oldSegment } });\n  }\n\n  function clearPlaceholder() {\n    dispatch({ type: 'clearPlaceholder' });\n  }\n\n  function setUISegments(\n    uiSegments: SegmentSelectorUIState['uiSegments'],\n    hasSelection?: boolean,\n  ) {\n    dispatch({ type: 'setUISegments', payload: { uiSegments, hasSelection } });\n  }\n\n  function setArrayIdentifierError(hasError: boolean, id: string) {\n    dispatch({ type: 'setArrayIdentifierError', payload: { hasError, id } });\n  }\n\n  function setUnavailableVariables(id: string, values: Set<string>) {\n    dispatch({ type: 'setUnavailableVariables', payload: { id, values } });\n  }\n\n  return {\n    removeAllUISegments,\n    removeUISegment,\n    addUISegment,\n    updateUISegment,\n    clearPlaceholder,\n    setUISegments,\n    setArrayIdentifierError,\n    setUnavailableVariables,\n  };\n};\n\n/**\n * Provider for the UISegments context that stores the selected segments in the proper order.\n * @param props - children only\n * @internal\n */\nexport const UISegmentsProvider = (\n  props: PropsWithChildren<{\n    readOnly?: boolean;\n    overlayState: OverlayTriggerState;\n  }>,\n) => {\n  const { children, readOnly, overlayState } = props;\n  const { segments } = useSegments();\n\n  const hasSelection = segments.length > 0;\n  const id = segments[0]?.id ?? crypto.randomUUID();\n\n  const [state, dispatch] = useReducer(segmentsUIReducer, {\n    uiSegments: hasSelection ? segments : [{ id, isPlaceholder: true }],\n    hasSelection,\n    readOnly,\n    focusedSegmentId: id,\n    isTouched: false,\n  });\n\n  const dispatchContext = useMemo(\n    () => ({ dispatch, overlayState }),\n    [dispatch, overlayState],\n  );\n\n  return (\n    <UISegmentsContext.Provider value={state}>\n      <UISegmentsDispatchContext.Provider value={dispatchContext}>\n        {children}\n      </UISegmentsDispatchContext.Provider>\n    </UISegmentsContext.Provider>\n  );\n};\n"],
+  "mappings": "AAoHM;AApHN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,iCAAiC;AAC1C;AAAA,EACE;AAAA,OAEK;AAGP,SAAS,mBAAmB;AAGrB,MAAM,oBAAoB,cAAsC;AAAA,EACrE,YAAY,CAAC;AAAA,EACb,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AACb,CAAC;AAGM,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,SAAS,IAAI,WAAW,yBAAyB;AAEzD,WAAS,aACP,YACA,gBAAyB,OACzB;AACA,aAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,EAAE,UAAU,YAAY,cAAc;AAAA,IACjD,CAAC;AAAA,EACH;AAEA,WAAS,gBAAgB,IAAoB;AAC3C,QAAI,IAAI;AACN,eAAS,EAAE,MAAM,UAAU,SAAS,EAAE,GAAG,EAAE,CAAC;AAAA,IAC9C;AAAA,EACF;AAEA,WAAS,sBAAsB;AAC7B,aAAS,EAAE,MAAM,YAAY,CAAC;AAAA,EAChC;AAEA,WAAS,gBAAgB,YAAuB,YAAuB;AACrE,aAAS,EAAE,MAAM,UAAU,SAAS,EAAE,YAAY,WAAW,EAAE,CAAC;AAAA,EAClE;AAEA,WAAS,mBAAmB;AAC1B,aAAS,EAAE,MAAM,mBAAmB,CAAC;AAAA,EACvC;AAEA,WAAS,cACP,YACA,cACA;AACA,aAAS,EAAE,MAAM,iBAAiB,SAAS,EAAE,YAAY,aAAa,EAAE,CAAC;AAAA,EAC3E;AAEA,WAAS,wBAAwB,UAAmB,IAAY;AAC9D,aAAS,EAAE,MAAM,2BAA2B,SAAS,EAAE,UAAU,GAAG,EAAE,CAAC;AAAA,EACzE;AAEA,WAAS,wBAAwB,IAAY,QAAqB;AAChE,aAAS,EAAE,MAAM,2BAA2B,SAAS,EAAE,IAAI,OAAO,EAAE,CAAC;AAAA,EACvE;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAOO,MAAM,qBAAqB,CAChC,UAIG;AACH,QAAM,EAAE,UAAU,UAAU,aAAa,IAAI;AAC7C,QAAM,EAAE,SAAS,IAAI,YAAY;AAEjC,QAAM,eAAe,SAAS,SAAS;AACvC,QAAM,KAAK,SAAS,CAAC,GAAG,MAAM,OAAO,WAAW;AAEhD,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,mBAAmB;AAAA,IACtD,YAAY,eAAe,WAAW,CAAC,EAAE,IAAI,eAAe,KAAK,CAAC;AAAA,IAClE;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,WAAW;AAAA,EACb,CAAC;AAED,QAAM,kBAAkB;AAAA,IACtB,OAAO,EAAE,UAAU,aAAa;AAAA,IAChC,CAAC,UAAU,YAAY;AAAA,EACzB;AAEA,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,OACjC,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,iBACxC,UACH,GACF;AAEJ;",
   "names": []
 }

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

@@ -79,7 +79,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,
@@ -121,6 +125,25 @@ 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;
+    }
   }
 }
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/contexts/SegmentsUI/SegmentsUIReducer.ts"],
-  "sourcesContent": ["import type { FilterSegment as QueryFilterSegment } from '@dynatrace-sdk/client-query';\n\nimport type { UISegment } from './UISegments.types.js';\n\nexport type SegmentSelectorReducerActions =\n  | {\n      type: 'add';\n      payload: { segments?: QueryFilterSegment; isPlaceholder: boolean };\n    }\n  | {\n      type: 'remove';\n      payload: { id: string };\n    }\n  | {\n      type: 'removeAll';\n    }\n  | {\n      type: 'update';\n      payload: {\n        oldSegment: QueryFilterSegment;\n        newSegment: QueryFilterSegment;\n      };\n    }\n  | { type: 'clearPlaceholder' }\n  | {\n      type: 'setArrayIdentifierError';\n      payload: { hasError: boolean; id: string };\n    }\n  | {\n      type: 'setUISegments';\n      payload: {\n        uiSegments: SegmentSelectorUIState['uiSegments'];\n        hasSelection?: boolean;\n      };\n    };\n\nexport type SegmentSelectorUIState = {\n  uiSegments: UISegment[];\n  hasSelection: boolean;\n  readOnly?: boolean;\n  focusedSegmentId?: string;\n  isTouched?: boolean;\n  arrayIdentifierErrorIds?: string[];\n};\n\nfunction updateErrorIds(\n  errorIds: string[] | undefined,\n  id: string,\n  hasError: boolean,\n) {\n  if (hasError) {\n    return Array.from(new Set([...(errorIds ?? []), id]));\n  }\n\n  return errorIds?.filter((errorId) => errorId !== id) ?? [];\n}\n\nexport function segmentsUIReducer(\n  state: SegmentSelectorUIState,\n  action: SegmentSelectorReducerActions,\n): SegmentSelectorUIState {\n  const { type } = action;\n\n  switch (type) {\n    case 'add': {\n      const { segments: segment, isPlaceholder } = action.payload;\n\n      if (segment && !isPlaceholder) {\n        return {\n          ...state,\n          isTouched: true,\n          hasSelection: true,\n          uiSegments: [...state.uiSegments, { ...segment }],\n          focusedSegmentId: segment.id,\n        };\n      }\n\n      const placeholderId = crypto.randomUUID();\n\n      return {\n        ...state,\n        hasSelection: true,\n        uiSegments: [\n          ...state.uiSegments,\n          {\n            id: placeholderId,\n            isPlaceholder: true,\n          },\n        ],\n      };\n    }\n    case 'remove': {\n      const { id } = action.payload;\n      const newSegments = state.uiSegments.filter(\n        (uiSegment) => id !== uiSegment.id,\n      );\n      const arrayIdentifierErrorIds = state.arrayIdentifierErrorIds?.filter(\n        (errorId) => errorId !== id,\n      );\n\n      if (newSegments.length === 0) {\n        return {\n          isTouched: true,\n          hasSelection: true,\n          uiSegments: [\n            {\n              id: crypto.randomUUID(),\n              isPlaceholder: true,\n            },\n          ],\n          arrayIdentifierErrorIds: [],\n        };\n      }\n\n      return {\n        isTouched: true,\n        hasSelection: true,\n        uiSegments: newSegments,\n        arrayIdentifierErrorIds,\n      };\n    }\n    case 'removeAll': {\n      return {\n        isTouched: true,\n        hasSelection: false,\n        uiSegments: [\n          {\n            id: crypto.randomUUID(),\n            isPlaceholder: true,\n          },\n        ],\n        arrayIdentifierErrorIds: [],\n      };\n    }\n    case 'update': {\n      const { newSegment, oldSegment } = action.payload;\n\n      const index = state.uiSegments.findIndex(\n        (uiSegment) => uiSegment.id === oldSegment.id,\n      );\n\n      if (index !== -1) {\n        const updatedSegments = [...state.uiSegments];\n        updatedSegments[index] = { ...newSegment };\n\n        return {\n          ...state,\n          isTouched: true,\n          hasSelection: state.uiSegments.length > 0,\n          uiSegments: updatedSegments,\n          focusedSegmentId: newSegment.id,\n        };\n      }\n\n      return state;\n    }\n    case 'clearPlaceholder': {\n      const actualSegmentsOnly = state.uiSegments.filter(\n        (uiSegment) => !uiSegment.isPlaceholder,\n      );\n\n      return {\n        ...state,\n        uiSegments: actualSegmentsOnly,\n      };\n    }\n    case 'setUISegments': {\n      const { payload } = action;\n      const { hasSelection, uiSegments } = payload;\n\n      return {\n        ...state,\n        isTouched: false,\n        uiSegments,\n        hasSelection: hasSelection ?? state.hasSelection,\n      };\n    }\n    case 'setArrayIdentifierError': {\n      const { payload } = action;\n      const { hasError, id } = payload;\n\n      return {\n        ...state,\n        arrayIdentifierErrorIds: updateErrorIds(\n          state.arrayIdentifierErrorIds,\n          id,\n          hasError,\n        ),\n      };\n    }\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { FilterSegment as QueryFilterSegment } from '@dynatrace-sdk/client-query';\n\nimport type { UISegment } from './UISegments.types.js';\n\nexport type SegmentSelectorReducerActions =\n  | {\n      type: 'add';\n      payload: { segments?: QueryFilterSegment; isPlaceholder: boolean };\n    }\n  | {\n      type: 'remove';\n      payload: { id: string };\n    }\n  | {\n      type: 'removeAll';\n    }\n  | {\n      type: 'update';\n      payload: {\n        oldSegment: QueryFilterSegment;\n        newSegment: QueryFilterSegment;\n      };\n    }\n  | { type: 'clearPlaceholder' }\n  | {\n      type: 'setArrayIdentifierError';\n      payload: { hasError: boolean; id: string };\n    }\n  | {\n      type: 'setUISegments';\n      payload: {\n        uiSegments: SegmentSelectorUIState['uiSegments'];\n        hasSelection?: boolean;\n      };\n    }\n  | {\n      type: 'setUnavailableVariables';\n      payload: { id: string; values: Set<string> };\n    };\n\nexport type SegmentSelectorUIState = {\n  uiSegments: UISegment[];\n  hasSelection: boolean;\n  readOnly?: boolean;\n  focusedSegmentId?: string;\n  isTouched?: boolean;\n  arrayIdentifierErrorIds?: string[];\n};\n\nfunction updateErrorIds(\n  errorIds: string[] | undefined,\n  id: string,\n  hasError: boolean,\n) {\n  if (hasError) {\n    return Array.from(new Set([...(errorIds ?? []), id]));\n  }\n\n  return errorIds?.filter((errorId) => errorId !== id) ?? [];\n}\n\nexport function segmentsUIReducer(\n  state: SegmentSelectorUIState,\n  action: SegmentSelectorReducerActions,\n): SegmentSelectorUIState {\n  const { type } = action;\n\n  switch (type) {\n    case 'add': {\n      const { segments: segment, isPlaceholder } = action.payload;\n\n      if (segment && !isPlaceholder) {\n        return {\n          ...state,\n          isTouched: true,\n          hasSelection: true,\n          uiSegments: [...state.uiSegments, { ...segment }],\n          focusedSegmentId: segment.id,\n        };\n      }\n\n      const placeholderId = crypto.randomUUID();\n\n      return {\n        ...state,\n        hasSelection: true,\n        uiSegments: [\n          ...state.uiSegments,\n          {\n            id: placeholderId,\n            isPlaceholder: true,\n          },\n        ],\n      };\n    }\n    case 'remove': {\n      const { id } = action.payload;\n      const newSegments = state.uiSegments.filter(\n        (uiSegment) => id !== uiSegment.id,\n      );\n      const arrayIdentifierErrorIds = state.arrayIdentifierErrorIds?.filter(\n        (errorId) => errorId !== id,\n      );\n\n      if (newSegments.length === 0) {\n        return {\n          isTouched: true,\n          hasSelection: true,\n          uiSegments: [\n            {\n              id: crypto.randomUUID(),\n              isPlaceholder: true,\n            },\n          ],\n          arrayIdentifierErrorIds: [],\n        };\n      }\n\n      return {\n        isTouched: true,\n        hasSelection: true,\n        uiSegments: newSegments,\n        arrayIdentifierErrorIds,\n      };\n    }\n    case 'removeAll': {\n      return {\n        isTouched: true,\n        hasSelection: false,\n        uiSegments: [\n          {\n            id: crypto.randomUUID(),\n            isPlaceholder: true,\n          },\n        ],\n        arrayIdentifierErrorIds: [],\n      };\n    }\n    case 'update': {\n      const { newSegment, oldSegment } = action.payload;\n\n      const index = state.uiSegments.findIndex(\n        (uiSegment) => uiSegment.id === oldSegment.id,\n      );\n\n      if (index !== -1) {\n        const updatedSegments = [...state.uiSegments];\n        const oldUiSegment = updatedSegments[index];\n\n        // Preserve unavailableVariables when the segment id is unchanged, reset otherwise\n        updatedSegments[index] = {\n          ...newSegment,\n          unavailableVariables:\n            newSegment.id === oldSegment.id\n              ? oldUiSegment?.unavailableVariables\n              : undefined,\n        };\n\n        return {\n          ...state,\n          isTouched: true,\n          hasSelection: state.uiSegments.length > 0,\n          uiSegments: updatedSegments,\n          focusedSegmentId: newSegment.id,\n        };\n      }\n\n      return state;\n    }\n    case 'clearPlaceholder': {\n      const actualSegmentsOnly = state.uiSegments.filter(\n        (uiSegment) => !uiSegment.isPlaceholder,\n      );\n\n      return {\n        ...state,\n        uiSegments: actualSegmentsOnly,\n      };\n    }\n    case 'setUISegments': {\n      const { payload } = action;\n      const { hasSelection, uiSegments } = payload;\n\n      return {\n        ...state,\n        isTouched: false,\n        uiSegments,\n        hasSelection: hasSelection ?? state.hasSelection,\n      };\n    }\n    case 'setArrayIdentifierError': {\n      const { payload } = action;\n      const { hasError, id } = payload;\n\n      return {\n        ...state,\n        arrayIdentifierErrorIds: updateErrorIds(\n          state.arrayIdentifierErrorIds,\n          id,\n          hasError,\n        ),\n      };\n    }\n    case 'setUnavailableVariables': {\n      const { payload } = action;\n      const { id, values } = payload;\n\n      const index = state.uiSegments.findIndex(\n        (uiSegment) => uiSegment.id === id,\n      );\n\n      if (index !== -1) {\n        const updatedSegments = [...state.uiSegments];\n        updatedSegments[index] = {\n          ...updatedSegments[index],\n          unavailableVariables: values,\n        };\n\n        return {\n          ...state,\n          uiSegments: updatedSegments,\n        };\n      }\n\n      return state;\n    }\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -0,0 +1,42 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  StratoValidityStateKeys
+} from "../../../forms/validation/types.js";
+import { segmentsClient } from "../contexts/SegmentsCache/SegmentsCache.js";
+import { getErrorKey } from "../contexts/SegmentsUI/segmentValidationHelper.js";
+function useSegmentsValidation(segments, enabled = true) {
+  const { data } = 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.
+            getErrorKey(segment).catch(
+              () => StratoValidityStateKeys.unavailable
+            )
+          )
+        )
+      ),
+      enabled
+    },
+    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
+  };
+}
+export {
+  useSegmentsValidation
+};
+//# sourceMappingURL=useSegmentsValidation.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/filters/segment-selector/hooks/useSegmentsValidation.ts"],
+  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\n\nimport type { FilterSegment } from '@dynatrace-sdk/client-query';\n\nimport {\n  StratoValidityStateKeys,\n  type StratoValidityStateKey,\n} from '../../../forms/validation/types.js';\nimport { segmentsClient } from '../contexts/SegmentsCache/SegmentsCache.js';\nimport { getErrorKey } from '../contexts/SegmentsUI/segmentValidationHelper.js';\n\n/** @internal */\nexport function useSegmentsValidation(\n  segments: FilterSegment[],\n  enabled: boolean = true,\n): {\n  errorKeys: (StratoValidityStateKey | null)[];\n  isValid: boolean;\n  isPending: boolean;\n} {\n  const { data } = useQuery(\n    {\n      queryKey: ['segmentsValidation', segments],\n      queryFn: (): Promise<(StratoValidityStateKey | null)[]> =>\n        Promise.all(\n          segments.map((segment) =>\n            // If getErrorKey throws (TanStack Query deduplication means SegmentText's\n            // throwing queryFn wins for unavailable segments), treat as faulty.\n            getErrorKey(segment).catch(\n              () => StratoValidityStateKeys.unavailable,\n            ),\n          ),\n        ),\n      enabled,\n    },\n    segmentsClient.queryClient,\n  );\n\n  if (!data) {\n    // Fail closed: treat absent data as pending (not yet validated). Only when\n    // enabled=true \u2014 a disabled query intentionally skips validation entirely.\n    return {\n      errorKeys: new Array(segments.length).fill(null),\n      isValid: true,\n      isPending: enabled,\n    };\n  }\n  return {\n    errorKeys: data,\n    isValid: data.every((key) => key === null),\n    isPending: false,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AAIzB;AAAA,EACE;AAAA,OAEK;AACP,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAGrB,SAAS,sBACd,UACA,UAAmB,MAKnB;AACA,QAAM,EAAE,KAAK,IAAI;AAAA,IACf;AAAA,MACE,UAAU,CAAC,sBAAsB,QAAQ;AAAA,MACzC,SAAS,MACP,QAAQ;AAAA,QACN,SAAS;AAAA,UAAI,CAAC;AAAA;AAAA;AAAA,YAGZ,YAAY,OAAO,EAAE;AAAA,cACnB,MAAM,wBAAwB;AAAA,YAChC;AAAA;AAAA,QACF;AAAA,MACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,eAAe;AAAA,EACjB;AAEA,MAAI,CAAC,MAAM;AAGT,WAAO;AAAA,MACL,WAAW,IAAI,MAAM,SAAS,MAAM,EAAE,KAAK,IAAI;AAAA,MAC/C,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AACA,SAAO;AAAA,IACL,WAAW;AAAA,IACX,SAAS,KAAK,MAAM,CAAC,QAAQ,QAAQ,IAAI;AAAA,IACzC,WAAW;AAAA,EACb;AACF;",
+  "names": []
+}

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

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useIntl } from "react-intl";
 import { useSegments } from "./useSegments.js";
@@ -19,7 +19,8 @@ function useTriggerProps(variant, remainingProps) {
     {
       queryKey: ["getSegment", safeId, shouldFetchText],
       queryFn: () => getSegment(safeId),
-      enabled: shouldFetchText
+      enabled: shouldFetchText,
+      placeholderData: keepPreviousData
     },
     segmentsClient.queryClient
   );
@@ -71,7 +72,11 @@ function useTriggerProps(variant, remainingProps) {
     "aria-label": ariaLabel,
     "aria-disabled": remainingProps["aria-disabled"]
   };
-  return { isLoading: shouldFetchText ? isLoading : false, text, ariaProps };
+  return {
+    isLoading: shouldFetchText && segmentsClient.hasAccessRights !== false ? isLoading : false,
+    text,
+    ariaProps
+  };
 }
 export {
   useTriggerProps