@dynatrace/strato-components 3.10.4 → 3.11.0

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

@@ -45,6 +45,7 @@ var styles = __toESM(require("./SegmentsPresets.sty.js"));
 var import_Button = require("../../../../buttons/button/Button.js");
 var import_useOverlayStacking = require("../../../../core/hooks/useOverlayStacking.js");
 var import_framer_motion_easings = require("../../../../core/utils/framer-motion-easings.js");
+var import_Divider = require("../../../../layouts/divider/Divider.js");
 var import_Flex = require("../../../../layouts/flex/Flex.js");
 var import_InputGroup = require("../../../../layouts/input-group/InputGroup.js");
 var import_Tooltip = require("../../../../overlays/tooltip/Tooltip.js");
@@ -56,6 +57,7 @@ var import_SegmentsUIContext = require("../../contexts/SegmentsUI/SegmentsUICont
 var import_SegmentsUIDispatchContext = require("../../contexts/SegmentsUI/SegmentsUIDispatchContext.js");
 var import_segmentValidationHelper = require("../../contexts/SegmentsUI/segmentValidationHelper.js");
 var import_useSegments = require("../../hooks/useSegments.js");
+var import_useSegmentsValidation = require("../../hooks/useSegmentsValidation.js");
 var import_utils = require("../../utils.js");
 var animationHelperStyles = __toESM(require("../Overlay.sty.js"));
 const expandAndCollapseAnimationVariants = {
@@ -100,8 +102,22 @@ const SegmentsPresetText = ({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentText, { segment })
   ] }, segment.id);
 };
-function usePinningTooltipText(pinLimitReached, isPinned) {
+function useActionTooltipText(pinLimitReached, isPinned, isFaulty) {
   const intl = (0, import_react_intl.useIntl)();
+  if (isFaulty) {
+    return intl.formatMessage({
+      defaultMessage: "Remove",
+      id: "B/mrEkQ2k6RSHAdX",
+      description: "Tooltip text for the remove button of a faulty segment preset."
+    });
+  }
+  if (isPinned) {
+    return intl.formatMessage({
+      defaultMessage: "Unpin",
+      id: "uCbwlgMp2BNGzNro",
+      description: "Text for the unpin button of a segment preset."
+    });
+  }
   if (pinLimitReached && !isPinned) {
     return intl.formatMessage({
       defaultMessage: "You can't pin more than 10 items.",
@@ -109,21 +125,14 @@ function usePinningTooltipText(pinLimitReached, isPinned) {
       description: "Tooltip text for pinning limit."
     });
   }
-  if (!isPinned) {
-    return intl.formatMessage(
-      {
-        defaultMessage: "Pin in {appName}",
-        id: "RPdRdtDJumoOO3os",
-        description: "Tooltip text for pin button."
-      },
-      { appName: (0, import_app_environment.getAppName)() }
-    );
-  }
-  return intl.formatMessage({
-    defaultMessage: "Unpin",
-    id: "uCbwlgMp2BNGzNro",
-    description: "Text for the unpin button of a segment preset."
-  });
+  return intl.formatMessage(
+    {
+      defaultMessage: "Pin in {appName}",
+      id: "RPdRdtDJumoOO3os",
+      description: "Tooltip text for pin button."
+    },
+    { appName: (0, import_app_environment.getAppName)() }
+  );
 }
 function updateCachePinMutation(old, id, segments) {
   const pinnedPresets = old.pinnedPresets;
@@ -147,20 +156,42 @@ function updateCacheUnpinMutation(old, id) {
     pinnedPresets
   };
 }
-const PresetTooltipText = ({ segments }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Flex.Flex, { flexDirection: "column", gap: 4, children: segments.map((segment) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      SegmentText,
-      {
-        segment,
-        variableClassName: (0, import_textStyle_css.textStyle)({
-          fontStyle: "text",
-          textStyle: "small"
-        })
-      },
-      segment.id
-    );
-  }) });
+function updateCacheRemoveRecentMutation(old, id) {
+  return {
+    ...old,
+    recentPresets: old.recentPresets.filter((preset) => preset.id !== id)
+  };
+}
+const PresetTooltipText = ({
+  segments,
+  isFaulty
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { flexDirection: "column", gap: 4, children: [
+    isFaulty && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_intl.FormattedMessage,
+        {
+          defaultMessage: "One or more segments of this preset are invalid and can't be applied.",
+          id: "6cOIaWQY3mdZZITF",
+          description: "Tooltip text shown above the segment list for presets that contain invalid segments."
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, {})
+    ] }),
+    segments.map((segment) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        SegmentText,
+        {
+          segment,
+          variableClassName: (0, import_textStyle_css.textStyle)({
+            fontStyle: "text",
+            textStyle: "small"
+          })
+        },
+        segment.id
+      );
+    })
+  ] });
 };
 const SegmentText = ({
   segment,
@@ -172,7 +203,9 @@ const SegmentText = ({
     {
       queryKey: ["getSegment", segment.id],
       queryFn: () => getSegment(segment.id),
-      notifyOnChangeProps: ["dataUpdatedAt"]
+      notifyOnChangeProps: ["dataUpdatedAt"],
+      initialData: () => import_SegmentsCache.segmentsClient.queryClient.getQueryData(["getAllSegments"])?.get(segment.id),
+      initialDataUpdatedAt: () => import_SegmentsCache.segmentsClient.queryClient.getQueryState(["getAllSegments"])?.dataUpdatedAt
     },
     import_SegmentsCache.segmentsClient.queryClient
   );
@@ -188,11 +221,30 @@ const SegmentText = ({
   }
   return `${data?.segment.name ?? segment.id}${variables}`;
 };
+function getStateAndIcon(isPinned, isFaulty) {
+  if (isFaulty) {
+    return {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.XmarkIcon, {}),
+      actionButtonDataDtProperties: "state:remove"
+    };
+  }
+  if (isPinned) {
+    return {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PinOffIcon, {}),
+      actionButtonDataDtProperties: "state:unpin"
+    };
+  }
+  return {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PinIcon, {}),
+    actionButtonDataDtProperties: "state:pin"
+  };
+}
 const SegmentsPreset = (props) => {
   const shouldReduceMotion = (0, import_framer_motion.useReducedMotion)();
   const {
     uiPreset,
     id,
+    origin,
     isPinned,
     isSelected,
     pinLimitReached
@@ -246,6 +298,23 @@ const SegmentsPreset = (props) => {
     },
     import_SegmentsCache.segmentsClient.queryClient
   );
+  const removeRecent = (0, import_react_query.useMutation)(
+    {
+      mutationKey: ["remove-recent-segment-preset", id],
+      mutationFn: import_segments_presets.removeRecentSegmentsPreset,
+      onMutate: async () => (0, import_queryHelper.runOptimisticMutation)(
+        "getSegmentsPresets",
+        (prevState) => updateCacheRemoveRecentMutation(prevState, id),
+        ["remove-recent-segment-preset", id, "getSegmentsPresets"]
+      ),
+      onError: (error, _, context) => (0, import_queryHelper.handleFailedOptimisticMutation)("getSegmentsPresets", error, context),
+      onSettled: () => (0, import_queryHelper.handleSettledOptimisticMutation)(
+        ["getSegmentsPresets"],
+        ["remove-recent-segment-preset", id]
+      )
+    },
+    import_SegmentsCache.segmentsClient.queryClient
+  );
   const applyPreset = (0, import_react_query.useMutation)(
     {
       mutationKey: ["apply-segment-preset", id],
@@ -267,19 +336,32 @@ const SegmentsPreset = (props) => {
         return setSegments(flattenedSegments);
       },
       onSuccess: async () => {
-        const isValid = await (0, import_segmentValidationHelper.areUiSegmentsValid)(segments);
-        if (isValid) {
+        const isValid2 = await (0, import_segmentValidationHelper.areUiSegmentsValid)(segments);
+        if (isValid2) {
           overlayState?.close();
         }
       }
     },
     import_SegmentsCache.segmentsClient.queryClient
   );
-  const color = isSelected ? "primary" : "neutral";
-  const pinningTooltipText = usePinningTooltipText(pinLimitReached, isPinned);
-  const icon = isPinned ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PinOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PinIcon, {});
-  const pinButtonDataDtProperties = `state:${isPinned ? "unpin" : "pin"}`;
-  const onClick = () => isPinned ? unpin.mutate(uiPreset.id) : pin.mutate(segments);
+  const { isValid, isPending: isValidationPending } = (0, import_useSegmentsValidation.useSegmentsValidation)(segments);
+  const isFaulty = !isValid;
+  const color = isSelected && !isFaulty ? "primary" : "neutral";
+  const actionTooltipText = useActionTooltipText(
+    pinLimitReached,
+    isPinned,
+    isFaulty
+  );
+  const { icon, actionButtonDataDtProperties } = getStateAndIcon(
+    isPinned,
+    isFaulty
+  );
+  const onClick = () => {
+    if (isFaulty) {
+      return origin === "pinned" ? unpin.mutate(uiPreset.id) : removeRecent.mutate(uiPreset.id);
+    }
+    return isPinned ? unpin.mutate(uiPreset.id) : pin.mutate(segments);
+  };
   const labelRef = (0, import_react.useRef)(null);
   const [showTooltip, setShowTooltip] = (0, import_react.useState)(false);
   const stackingContext = (0, import_useOverlayStacking.useOverlayStacking)(void 0, "overlay");
@@ -300,7 +382,7 @@ const SegmentsPreset = (props) => {
         {
           className: (0, import_clsx.default)([
             styles.inputGroup,
-            { [styles.inputGroupSelected]: isSelected }
+            { [styles.inputGroupSelected]: isSelected && !isFaulty }
           ]),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -308,9 +390,13 @@ const SegmentsPreset = (props) => {
               {
                 placement: "left",
                 fallbackPlacements: ["top", "bottom", "right"],
-                text: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PresetTooltipText, { segments }),
+                text: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PresetTooltipText, { segments, isFaulty }),
                 open: showTooltip,
                 onOpenChange: (isOpen) => {
+                  if (isFaulty) {
+                    setShowTooltip(isOpen);
+                    return;
+                  }
                   const hasOverFlow = (labelRef.current?.scrollWidth ?? 0) > (labelRef.current?.clientWidth ?? 0);
                   setShowTooltip(isOpen && hasOverFlow);
                 },
@@ -328,7 +414,9 @@ const SegmentsPreset = (props) => {
                     className: (0, import_clsx.default)(styles.presetButton, {
                       [styles.selectionMark]: isSelected
                     }),
-                    onClick: () => applyPreset.mutate(),
+                    disabled: isFaulty,
+                    onClick: () => !isValidationPending && applyPreset.mutate(),
+                    id: `preset-label-${id}`,
                     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Label, { className: styles.buttonLabel, ref: labelRef, children: segments.map((segment, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                       SegmentsPresetText,
                       {
@@ -345,7 +433,7 @@ const SegmentsPreset = (props) => {
               import_Tooltip.Tooltip,
               {
                 placement: "right",
-                text: pinningTooltipText,
+                text: actionTooltipText,
                 className: (0, import_textStyle_css.textStyle)({
                   fontStyle: "text",
                   textStyle: "small-emphasized"
@@ -357,10 +445,11 @@ const SegmentsPreset = (props) => {
                     color,
                     className: styles.suffixButton,
                     onClick,
-                    disabled: pinLimitReached && !isPinned,
-                    "aria-label": pinningTooltipText,
+                    disabled: isValidationPending || !isFaulty && pinLimitReached && !isPinned,
+                    "aria-label": actionTooltipText,
+                    "aria-describedby": `preset-label-${id}`,
                     "data-dt-children-name": "PinUnpin",
-                    "data-dt-properties": pinButtonDataDtProperties,
+                    "data-dt-properties": actionButtonDataDtProperties,
                     children: icon
                   }
                 )

package/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.css

@@ -1,27 +1,27 @@
-._1oehqvw3-3-10-4 {
+._1oehqvw3-3-11-0 {
   all: unset;
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw4-3-10-4 {
+._1oehqvw4-3-11-0 {
   all: unset;
   display: block;
 }
-._1oehqvw5-3-10-4._1oehqvw5-3-10-4 {
-  color: var(--_1oehqvw2-3-10-4);
+._1oehqvw5-3-11-0._1oehqvw5-3-11-0 {
+  color: var(--_1oehqvw2-3-11-0);
 }
-._1oehqvw6-3-10-4 {
+._1oehqvw6-3-11-0 {
   align-items: center;
   display: inline-block;
   text-wrap: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1oehqvw7-3-10-4._1oehqvw7-3-10-4 {
+._1oehqvw7-3-11-0._1oehqvw7-3-11-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw8-3-10-4::before {
+._1oehqvw8-3-11-0::before {
   content: " ";
   position: absolute;
   display: block;
@@ -32,50 +32,54 @@
   left: 0px;
   transform: translate(4px);
 }
-._1oehqvw9-3-10-4 {
-  --_1oehqvw0-3-10-4: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1oehqvw1-3-10-4: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
-  --_1oehqvw2-3-10-4: var(--dt-colors-text-neutral-subdued, #595a7d);
+._1oehqvw9-3-11-0 {
+  --_1oehqvw0-3-11-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1oehqvw1-3-11-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+  --_1oehqvw2-3-11-0: var(--dt-colors-text-neutral-subdued, #595a7d);
   grid-template-columns: 1fr max-content;
 }
-._1jgl8s50-3-10-4 ._1oehqvw9-3-10-4._1oehqvw9-3-10-4._1oehqvw9-3-10-4 {
+._1jgl8s50-3-11-0 ._1oehqvw9-3-11-0._1oehqvw9-3-11-0._1oehqvw9-3-11-0 {
   gap: 1px;
 }
-._1jgl8s50-3-10-4 ._1oehqvw9-3-10-4 {
-  --_1oehqvw0-3-10-4: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+._1jgl8s50-3-11-0 ._1oehqvw9-3-11-0 {
+  --_1oehqvw0-3-11-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1oehqvwa-3-10-4 {
-  --_1oehqvw0-3-10-4: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-  --_1oehqvw1-3-10-4: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
-  --_1oehqvw2-3-10-4: var(--dt-colors-text-primary-default, #464cce);
+._1oehqvwa-3-11-0 {
+  --_1oehqvw0-3-11-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+  --_1oehqvw1-3-11-0: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
+  --_1oehqvw2-3-11-0: var(--dt-colors-text-primary-default, #464cce);
 }
-._1jgl8s50-3-10-4 ._1oehqvwa-3-10-4 {
-  --_1oehqvw0-3-10-4: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+._1jgl8s50-3-11-0 ._1oehqvwa-3-11-0 {
+  --_1oehqvw0-3-11-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
 }
-._1oehqvwb-3-10-4:hover._1oehqvwb-3-10-4:hover, ._1oehqvwb-3-10-4:focus-visible._1oehqvwb-3-10-4:focus-visible {
-  background-color: var(--_1oehqvw1-3-10-4);
+._1oehqvwb-3-11-0:hover._1oehqvwb-3-11-0:hover, ._1oehqvwb-3-11-0:focus-visible._1oehqvwb-3-11-0:focus-visible {
+  background-color: var(--_1oehqvw1-3-11-0);
 }
-._1oehqvwc-3-10-4._1oehqvwc-3-10-4 {
+._1oehqvwb-3-11-0:disabled:hover._1oehqvwb-3-11-0:disabled:hover {
+  background-color: var(--_1oehqvw0-3-11-0);
+  cursor: not-allowed;
+}
+._1oehqvwc-3-11-0._1oehqvwc-3-11-0 {
   opacity: 0;
-  background-color: var(--_1oehqvw0-3-10-4);
+  background-color: var(--_1oehqvw0-3-11-0);
 }
-._1oehqvwc-3-10-4:hover._1oehqvwc-3-10-4:hover, ._1oehqvwc-3-10-4:focus-visible._1oehqvwc-3-10-4:focus-visible {
-  background-color: var(--_1oehqvw1-3-10-4);
+._1oehqvwc-3-11-0:hover._1oehqvwc-3-11-0:hover, ._1oehqvwc-3-11-0:focus-visible._1oehqvwc-3-11-0:focus-visible {
+  background-color: var(--_1oehqvw1-3-11-0);
 }
-._1oehqvwc-3-10-4:disabled, ._1oehqvwc-3-10-4:disabled:hover._1oehqvwc-3-10-4:disabled:hover {
+._1oehqvwc-3-11-0:disabled, ._1oehqvwc-3-11-0:disabled:hover._1oehqvwc-3-11-0:disabled:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1jgl8s50-3-10-4 ._1oehqvwc-3-10-4._1oehqvwc-3-10-4._1oehqvwc-3-10-4 {
+._1jgl8s50-3-11-0 ._1oehqvwc-3-11-0._1oehqvwc-3-11-0._1oehqvwc-3-11-0 {
   margin-left: var(--dt-spacings-size-0, 0);
 }
-._1oehqvw9-3-10-4:has(button:focus-visible) ._1oehqvwc-3-10-4, ._1oehqvw9-3-10-4:hover ._1oehqvwc-3-10-4 {
+._1oehqvw9-3-11-0:has(button:focus-visible) ._1oehqvwc-3-11-0, ._1oehqvw9-3-11-0:hover ._1oehqvwc-3-11-0 {
   opacity: 1;
 }
-._1oehqvw9-3-10-4:has(._1oehqvwc-3-10-4:focus-visible) ._1oehqvwb-3-10-4, ._1oehqvw9-3-10-4:hover ._1oehqvwb-3-10-4:not(:hover) {
-  background-color: var(--_1oehqvw0-3-10-4);
+._1oehqvw9-3-11-0:has(._1oehqvwc-3-11-0:focus-visible) ._1oehqvwb-3-11-0, ._1oehqvw9-3-11-0:hover ._1oehqvwb-3-11-0:not(:hover) {
+  background-color: var(--_1oehqvw0-3-11-0);
 }
-._1oehqvw9-3-10-4 button, ._1oehqvw9-3-10-4:hover button {
+._1oehqvw9-3-11-0 button, ._1oehqvw9-3-11-0:hover button {
   transition-timing-function: unset;
   transition-duration: 0s;
   transition: none;

package/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.sty.js

@@ -31,13 +31,13 @@ __export(SegmentsPresets_css_exports, {
 module.exports = __toCommonJS(SegmentsPresets_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../../core/components/app-root/AppRoot.css");
 var import_SegmentsPresets_css_ts_vanilla = require("./SegmentsPresets.css");
-var and = "_1oehqvw5-3-10-4";
-var buttonLabel = "_1oehqvw6-3-10-4";
-var inputGroup = "_1oehqvw9-3-10-4";
-var inputGroupSelected = "_1oehqvwa-3-10-4";
-var list = "_1oehqvw3-3-10-4";
-var listItem = "_1oehqvw4-3-10-4";
-var presetButton = "_1oehqvwb-3-10-4";
-var sectionHeadline = "_1oehqvw7-3-10-4";
-var selectionMark = "_1oehqvw8-3-10-4";
-var suffixButton = "_1oehqvwc-3-10-4";
+var and = "_1oehqvw5-3-11-0";
+var buttonLabel = "_1oehqvw6-3-11-0";
+var inputGroup = "_1oehqvw9-3-11-0";
+var inputGroupSelected = "_1oehqvwa-3-11-0";
+var list = "_1oehqvw3-3-11-0";
+var listItem = "_1oehqvw4-3-11-0";
+var presetButton = "_1oehqvwb-3-11-0";
+var sectionHeadline = "_1oehqvw7-3-11-0";
+var selectionMark = "_1oehqvw8-3-11-0";
+var suffixButton = "_1oehqvwc-3-11-0";

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

@@ -67,7 +67,7 @@ const SegmentsPresetList = ({
     return null;
   }
   const pinLimitReached = data.pinnedPresets.length >= PIN_LIMIT;
-  const recentPresets = data.recentPresets?.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const recentPresets = data.recentPresets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "li",
     {
       className: styles.listItem,
@@ -77,6 +77,7 @@ const SegmentsPresetList = ({
         {
           uiPreset: preset,
           id: preset.id,
+          origin: "recent",
           pinLimitReached,
           isPinned: data.pinnedPresets.some(
             (pinnedPreset) => preset.id === pinnedPreset.id
@@ -170,6 +171,7 @@ const SegmentsPresetList = ({
                       {
                         uiPreset: preset,
                         id: preset.id,
+                        origin: "pinned",
                         pinLimitReached,
                         isPinned: true,
                         isSelected: (0, import_isSelectedPreset.isSelectedPreset)(segments, preset.segments)

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

@@ -1,83 +1,83 @@
-._1fuxi5m0-3-10-4 {
+._1fuxi5m0-3-11-0 {
   grid-area: segment;
 }
-._1jgl8s50-3-10-4 ._1fuxi5m0-3-10-4 {
+._1jgl8s50-3-11-0 ._1fuxi5m0-3-11-0 {
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-10-4 ._1fuxi5m0-3-10-4:hover, ._1jgl8s50-3-10-4 ._1fuxi5m0-3-10-4:active, ._1jgl8s50-3-10-4 ._1fuxi5m0-3-10-4:focus-within {
+._1jgl8s50-3-11-0 ._1fuxi5m0-3-11-0:hover, ._1jgl8s50-3-11-0 ._1fuxi5m0-3-11-0:active, ._1jgl8s50-3-11-0 ._1fuxi5m0-3-11-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m2-3-10-4._1fuxi5m2-3-10-4 {
+._1fuxi5m2-3-11-0._1fuxi5m2-3-11-0 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1fuxi5m3-3-10-4 {
+._1fuxi5m3-3-11-0 {
   grid-area: variables;
 }
-._1jgl8s50-3-10-4 ._1fuxi5m3-3-10-4 {
+._1jgl8s50-3-11-0 ._1fuxi5m3-3-11-0 {
   margin-left: -1px;
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-10-4 ._1fuxi5m3-3-10-4:hover, ._1jgl8s50-3-10-4 ._1fuxi5m3-3-10-4:active, ._1jgl8s50-3-10-4 ._1fuxi5m3-3-10-4:focus-within {
+._1jgl8s50-3-11-0 ._1fuxi5m3-3-11-0:hover, ._1jgl8s50-3-11-0 ._1fuxi5m3-3-11-0:active, ._1jgl8s50-3-11-0 ._1fuxi5m3-3-11-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m4-3-10-4 {
+._1fuxi5m4-3-11-0 {
   width: 100%;
   border-top-left-radius: 0;
 }
-._1fuxi5m5-3-10-4 {
+._1fuxi5m5-3-11-0 {
   grid-area: clear;
   grid-row-start: 1;
 }
-._1fuxi5m5-3-10-4._1fuxi5m5-3-10-4 {
+._1fuxi5m5-3-11-0._1fuxi5m5-3-11-0 {
   height: 100%;
   border-radius: 0 var(--dt-borders-radius-field-default, 6px) var(--dt-borders-radius-field-default, 6px) 0;
 }
-._1jgl8s50-3-10-4 ._1fuxi5m5-3-10-4 {
+._1jgl8s50-3-11-0 ._1fuxi5m5-3-11-0 {
   margin-left: -1px;
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-10-4 ._1fuxi5m5-3-10-4:hover, ._1jgl8s50-3-10-4 ._1fuxi5m5-3-10-4:active, ._1jgl8s50-3-10-4 ._1fuxi5m5-3-10-4:focus-within {
+._1jgl8s50-3-11-0 ._1fuxi5m5-3-11-0:hover, ._1jgl8s50-3-11-0 ._1fuxi5m5-3-11-0:active, ._1jgl8s50-3-11-0 ._1fuxi5m5-3-11-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m6-3-10-4 {
+._1fuxi5m6-3-11-0 {
   gap: var(--dt-spacings-size-2, 2px);
   width: 100%;
   grid-template-columns: 40% auto max-content;
 }
-._1jgl8s50-3-10-4 ._1fuxi5m6-3-10-4 {
+._1jgl8s50-3-11-0 ._1fuxi5m6-3-11-0 {
   gap: var(--dt-spacings-size-0, 0);
 }
-._1fuxi5m7-3-10-4 {
+._1fuxi5m7-3-11-0 {
   grid-template-areas: "segment variables clear";
 }
-._1fuxi5m8-3-10-4 {
+._1fuxi5m8-3-11-0 {
   grid-template-areas: "segment variables";
   grid-template-columns: 40% auto;
 }
-._1fuxi5m9-3-10-4 {
+._1fuxi5m9-3-11-0 {
   grid-template-areas: "segment segment clear";
 }
-._1fuxi5ma-3-10-4 {
+._1fuxi5ma-3-11-0 {
   grid-template-areas: "segment segment";
 }
 @media screen and (max-width: 640px) {
-  ._1fuxi5m1-3-10-4 {
+  ._1fuxi5m1-3-11-0 {
     border-bottom-left-radius: 0;
   }
-  ._1jgl8s50-3-10-4 ._1fuxi5m3-3-10-4 {
+  ._1jgl8s50-3-11-0 ._1fuxi5m3-3-11-0 {
     margin-left: 0;
     margin-top: -1px;
   }
-  ._1fuxi5m7-3-10-4 {
+  ._1fuxi5m7-3-11-0 {
     grid-template-areas: "segment segment clear" "variables variables clear";
   }
 }
 @media screen and (min-width: 641px) {
-  ._1fuxi5m4-3-10-4 {
+  ._1fuxi5m4-3-11-0 {
     border-bottom-left-radius: 0;
   }
 }

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

@@ -29,10 +29,10 @@ module.exports = __toCommonJS(SegmentSelect_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../../core/components/app-root/AppRoot.css");
 var import_SegmentSelect_css_ts_vanilla = require("./SegmentSelect.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var clearButtonCSS = "_1fuxi5m5-3-10-4";
-var noBorderRadiusRight = "_1fuxi5m2-3-10-4";
-var segmentsSelectCSS = "_1fuxi5m0-3-10-4";
-var segmentsSelectGridCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1fuxi5m6-3-10-4", variantClassNames: { layout: { full: "_1fuxi5m7-3-10-4", "full-readonly": "_1fuxi5m8-3-10-4", "no-variables": "_1fuxi5m9-3-10-4", "no-variables-readonly": "_1fuxi5ma-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var segmentsSelectTriggerCSS = "_1fuxi5m1-3-10-4";
-var variablesSelectCSS = "_1fuxi5m3-3-10-4";
-var variablesSelectTriggerCSS = "_1fuxi5m4-3-10-4";
+var clearButtonCSS = "_1fuxi5m5-3-11-0";
+var noBorderRadiusRight = "_1fuxi5m2-3-11-0";
+var segmentsSelectCSS = "_1fuxi5m0-3-11-0";
+var segmentsSelectGridCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1fuxi5m6-3-11-0", variantClassNames: { layout: { full: "_1fuxi5m7-3-11-0", "full-readonly": "_1fuxi5m8-3-11-0", "no-variables": "_1fuxi5m9-3-11-0", "no-variables-readonly": "_1fuxi5ma-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var segmentsSelectTriggerCSS = "_1fuxi5m1-3-11-0";
+var variablesSelectCSS = "_1fuxi5m3-3-11-0";
+var variablesSelectTriggerCSS = "_1fuxi5m4-3-11-0";

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

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

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

@@ -21,4 +21,4 @@ __export(SegmentSelectorTrigger_css_exports, {
 });
 module.exports = __toCommonJS(SegmentSelectorTrigger_css_exports);
 var import_SegmentSelectorTrigger_css_ts_vanilla = require("./SegmentSelectorTrigger.css");
-var trigger = "_1e5el1o0-3-10-4";
+var trigger = "_1e5el1o0-3-11-0";

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

@@ -87,14 +87,12 @@ function getErrorMessageFromKey(errorKey) {
   return null;
 }
 const ErrorMessages = ({ uiSegment }) => {
-  const {
-    data: errorKey,
-    isLoading,
-    error
-  } = (0, import_react_query.useQuery)(
+  const { data: errorKey } = (0, import_react_query.useQuery)(
     {
       queryKey: ["errorKey", uiSegment],
-      queryFn: () => (0, import_segmentValidationHelper.getErrorKey)(uiSegment)
+      queryFn: () => (0, import_segmentValidationHelper.getErrorKey)(uiSegment),
+      staleTime: Infinity
+      // only needs updates if the segment changes, which is handled by the query key
     },
     import_SegmentsCache.segmentsClient.queryClient
   );
@@ -102,7 +100,7 @@ const ErrorMessages = ({ uiSegment }) => {
   const hasArrayIdentifierError = arrayIdentifierErrorIds?.includes(
     uiSegment.id
   );
-  if (import_SegmentsCache.segmentsClient.hasAccessRights === false || isLoading || error) {
+  if (import_SegmentsCache.segmentsClient.hasAccessRights === false) {
     return null;
   }
   const errorMessage = getErrorMessageFromKey(errorKey);
@@ -237,6 +235,7 @@ const SelectionBar = (props) => {
                   readOnly,
                   segment,
                   variables,
+                  unavailableVariables: uiSegment.unavailableVariables,
                   triggerClassName: (0, import_clsx.default)({
                     [import_SegmentSelect_css.noBorderRadiusRight]: clearable && !readOnly
                   })

package/filters/segment-selector/parts/selectionBar/ValueSelect.d.ts

@@ -4,9 +4,11 @@ type ValueSelectProps = {
     segment: CachedSegment;
     variables?: string[];
     triggerClassName?: string;
+    unavailableVariables?: Set<string>;
 };
 /**
- * ValueSelect component that allows the selection of variables of the segment
+ * ValueSelect component that allows the selection of variables of the segment.
+ * Handles DQL-based segment variable loading, permission validation, and unavailable variable tracking.
  * @internal
  */
 export declare const ValueSelect: (props: ValueSelectProps) => import("react").JSX.Element;