@dynatrace/strato-components 3.13.2 → 3.14.0

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

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

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

@@ -1,13 +1,13 @@
 import "../../../../core/components/app-root/AppRoot.css";
 import "./SegmentSelect.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearButtonCSS = "_1fuxi5m5-3-13-2";
-var noBorderRadiusRight = "_1fuxi5m2-3-13-2";
-var segmentsSelectCSS = "_1fuxi5m0-3-13-2";
-var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m6-3-13-2", variantClassNames: { layout: { full: "_1fuxi5m7-3-13-2", "full-readonly": "_1fuxi5m8-3-13-2", "no-variables": "_1fuxi5m9-3-13-2", "no-variables-readonly": "_1fuxi5ma-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
-var segmentsSelectTriggerCSS = "_1fuxi5m1-3-13-2";
-var variablesSelectCSS = "_1fuxi5m3-3-13-2";
-var variablesSelectTriggerCSS = "_1fuxi5m4-3-13-2";
+var clearButtonCSS = "_1fuxi5m5-3-14-0";
+var noBorderRadiusRight = "_1fuxi5m2-3-14-0";
+var segmentsSelectCSS = "_1fuxi5m0-3-14-0";
+var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m6-3-14-0", variantClassNames: { layout: { full: "_1fuxi5m7-3-14-0", "full-readonly": "_1fuxi5m8-3-14-0", "no-variables": "_1fuxi5m9-3-14-0", "no-variables-readonly": "_1fuxi5ma-3-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var segmentsSelectTriggerCSS = "_1fuxi5m1-3-14-0";
+var variablesSelectCSS = "_1fuxi5m3-3-14-0";
+var variablesSelectTriggerCSS = "_1fuxi5m4-3-14-0";
 export {
   clearButtonCSS,
   noBorderRadiusRight,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelect.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m5-3-13-2';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-13-2';\nexport var segmentsSelectCSS = '_1fuxi5m0-3-13-2';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m6-3-13-2',variantClassNames:{layout:{full:'_1fuxi5m7-3-13-2','full-readonly':'_1fuxi5m8-3-13-2','no-variables':'_1fuxi5m9-3-13-2','no-variables-readonly':'_1fuxi5ma-3-13-2'}},defaultVariants:{},compoundVariants:[]});\nexport var segmentsSelectTriggerCSS = '_1fuxi5m1-3-13-2';\nexport var variablesSelectCSS = '_1fuxi5m3-3-13-2';\nexport var variablesSelectTriggerCSS = '_1fuxi5m4-3-13-2';"],
+  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m5-3-14-0';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-14-0';\nexport var segmentsSelectCSS = '_1fuxi5m0-3-14-0';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m6-3-14-0',variantClassNames:{layout:{full:'_1fuxi5m7-3-14-0','full-readonly':'_1fuxi5m8-3-14-0','no-variables':'_1fuxi5m9-3-14-0','no-variables-readonly':'_1fuxi5ma-3-14-0'}},defaultVariants:{},compoundVariants:[]});\nexport var segmentsSelectTriggerCSS = '_1fuxi5m1-3-14-0';\nexport var variablesSelectCSS = '_1fuxi5m3-3-14-0';\nexport var variablesSelectTriggerCSS = '_1fuxi5m4-3-14-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB;AACrB,IAAI,sBAAsB;AAC1B,IAAI,oBAAoB;AACxB,IAAI,wBAAwB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,QAAO,EAAC,MAAK,oBAAmB,iBAAgB,oBAAmB,gBAAe,oBAAmB,yBAAwB,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpR,IAAI,2BAA2B;AAC/B,IAAI,qBAAqB;AACzB,IAAI,4BAA4B;",
   "names": []
 }

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

@@ -1,3 +1,10 @@
-._1e5el1o0-3-13-2 {
+._1e5el1o0-3-14-0 {
   max-width: 400px;
+}
+._1e5el1o1-3-14-0 {
+  font-size: 0;
+  transition-property: transform;
+}
+._1e5el1o2-3-14-0 {
+  transform: rotate(180deg);
 }

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

@@ -26,7 +26,15 @@ const SegmentSelectorTrigger = (props) => {
       children: [
         /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(SegmentIcon, {}) }),
         displayValue && /* @__PURE__ */ jsx(TextEllipsis, { ref: textEllipsisRef, children: displayValue }),
-        /* @__PURE__ */ jsx(Button.Suffix, { children: /* @__PURE__ */ jsx(ChevronDownSmallIcon, {}) })
+        /* @__PURE__ */ jsx(Button.Suffix, { children: /* @__PURE__ */ jsx(
+          ChevronDownSmallIcon,
+          {
+            className: clsx(
+              styles.suffix,
+              triggerProps?.["aria-expanded"] && styles.suffixOpen
+            )
+          }
+        ) })
       ]
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\n\nimport { ChevronDownSmallIcon, SegmentIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './SegmentSelectorTrigger.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { AriaLabelingProps } from '../../../../core/types/a11y-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { mergeProps as _mergeProps } from '../../../../core/utils/merge-props.js';\nimport { TextEllipsis } from '../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { useSegmentsTriggerContext } from '../../hooks/useTriggerContext.js';\n\ntype SegmentSelectorTriggerProps = AriaLabelingProps &\n  DataTestId &\n  StylingProps & {\n    textEllipsisRef: (ref: HTMLSpanElement | null) => void;\n  };\n\n/**\n * The default Trigger for the SegmentSelector.\n * @internal\n */\nexport const SegmentSelectorTrigger = (props: SegmentSelectorTriggerProps) => {\n  const {\n    textEllipsisRef,\n    className: consumerClassName,\n    ...remainingProps\n  } = props;\n\n  const { triggerProps, displayValue, isLoading, buttonRef, showError } =\n    useSegmentsTriggerContext();\n\n  return (\n    <Button\n      ref={buttonRef}\n      loading={isLoading}\n      variant=\"emphasized\"\n      textAlign=\"start\"\n      color={showError ? 'critical' : 'neutral'}\n      className={clsx(styles.trigger, consumerClassName)}\n      {..._mergeProps(triggerProps, remainingProps)}\n    >\n      <Button.Prefix>\n        <SegmentIcon />\n      </Button.Prefix>\n      {displayValue && (\n        <TextEllipsis ref={textEllipsisRef}>{displayValue}</TextEllipsis>\n      )}\n      <Button.Suffix>\n        <ChevronDownSmallIcon />\n      </Button.Suffix>\n    </Button>\n  );\n};\n\n(\n  SegmentSelectorTrigger as typeof SegmentSelectorTrigger & {\n    displayName: string;\n  }\n).displayName = 'SegmentSelectorTrigger';\n"],
-  "mappings": "AAkCI,SAUI,KAVJ;AAlCJ,OAAO,UAAU;AAEjB,SAAS,sBAAsB,mBAAmB;AAElD,YAAY,YAAY;AACxB,SAAS,cAAc;AAIvB,SAAS,cAAc,mBAAmB;AAC1C,SAAS,oBAAoB;AAC7B,SAAS,iCAAiC;AAYnC,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,cAAc,cAAc,WAAW,WAAW,UAAU,IAClE,0BAA0B;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,SAAS;AAAA,MACT,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,OAAO,YAAY,aAAa;AAAA,MAChC,WAAW,KAAK,OAAO,SAAS,iBAAiB;AAAA,MAChD,GAAG,YAAY,cAAc,cAAc;AAAA,MAE5C;AAAA,4BAAC,OAAO,QAAP,EACC,8BAAC,eAAY,GACf;AAAA,QACC,gBACC,oBAAC,gBAAa,KAAK,iBAAkB,wBAAa;AAAA,QAEpD,oBAAC,OAAO,QAAP,EACC,8BAAC,wBAAqB,GACxB;AAAA;AAAA;AAAA,EACF;AAEJ;AAGE,uBAGA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\n\nimport { ChevronDownSmallIcon, SegmentIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './SegmentSelectorTrigger.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { AriaLabelingProps } from '../../../../core/types/a11y-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { mergeProps as _mergeProps } from '../../../../core/utils/merge-props.js';\nimport { TextEllipsis } from '../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { useSegmentsTriggerContext } from '../../hooks/useTriggerContext.js';\n\ntype SegmentSelectorTriggerProps = AriaLabelingProps &\n  DataTestId &\n  StylingProps & {\n    textEllipsisRef: (ref: HTMLSpanElement | null) => void;\n  };\n\n/**\n * The default Trigger for the SegmentSelector.\n * @internal\n */\nexport const SegmentSelectorTrigger = (props: SegmentSelectorTriggerProps) => {\n  const {\n    textEllipsisRef,\n    className: consumerClassName,\n    ...remainingProps\n  } = props;\n\n  const { triggerProps, displayValue, isLoading, buttonRef, showError } =\n    useSegmentsTriggerContext();\n\n  return (\n    <Button\n      ref={buttonRef}\n      loading={isLoading}\n      variant=\"emphasized\"\n      textAlign=\"start\"\n      color={showError ? 'critical' : 'neutral'}\n      className={clsx(styles.trigger, consumerClassName)}\n      {..._mergeProps(triggerProps, remainingProps)}\n    >\n      <Button.Prefix>\n        <SegmentIcon />\n      </Button.Prefix>\n      {displayValue && (\n        <TextEllipsis ref={textEllipsisRef}>{displayValue}</TextEllipsis>\n      )}\n      <Button.Suffix>\n        <ChevronDownSmallIcon\n          className={clsx(\n            styles.suffix,\n            triggerProps?.['aria-expanded'] && styles.suffixOpen,\n          )}\n        />\n      </Button.Suffix>\n    </Button>\n  );\n};\n\n(\n  SegmentSelectorTrigger as typeof SegmentSelectorTrigger & {\n    displayName: string;\n  }\n).displayName = 'SegmentSelectorTrigger';\n"],
+  "mappings": "AAkCI,SAUI,KAVJ;AAlCJ,OAAO,UAAU;AAEjB,SAAS,sBAAsB,mBAAmB;AAElD,YAAY,YAAY;AACxB,SAAS,cAAc;AAIvB,SAAS,cAAc,mBAAmB;AAC1C,SAAS,oBAAoB;AAC7B,SAAS,iCAAiC;AAYnC,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,cAAc,cAAc,WAAW,WAAW,UAAU,IAClE,0BAA0B;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,SAAS;AAAA,MACT,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,OAAO,YAAY,aAAa;AAAA,MAChC,WAAW,KAAK,OAAO,SAAS,iBAAiB;AAAA,MAChD,GAAG,YAAY,cAAc,cAAc;AAAA,MAE5C;AAAA,4BAAC,OAAO,QAAP,EACC,8BAAC,eAAY,GACf;AAAA,QACC,gBACC,oBAAC,gBAAa,KAAK,iBAAkB,wBAAa;AAAA,QAEpD,oBAAC,OAAO,QAAP,EACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,eAAe,eAAe,KAAK,OAAO;AAAA,YAC5C;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAGE,uBAGA,cAAc;",
   "names": []
 }

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

@@ -1,6 +1,10 @@
 import "./SegmentSelectorTrigger.css";
-var trigger = "_1e5el1o0-3-13-2";
+var suffix = "_1e5el1o1-3-14-0";
+var suffixOpen = "_1e5el1o2-3-14-0";
+var trigger = "_1e5el1o0-3-14-0";
 export {
+  suffix,
+  suffixOpen,
   trigger
 };
 //# sourceMappingURL=SegmentSelectorTrigger.sty.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.css.ts"],
-  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-13-2';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
+  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var suffix = '_1e5el1o1-3-14-0';\nexport var suffixOpen = '_1e5el1o2-3-14-0';\nexport var trigger = '_1e5el1o0-3-14-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,aAAa;AACjB,IAAI,UAAU;",
   "names": []
 }

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

@@ -12,6 +12,10 @@ import { StratoLoggerContext } from "../../../../core/sdk/StratoLoggerContext.js
 import { useFormFieldMessagesContext } from "../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js";
 import { FormFieldMessagesAction } from "../../../../forms/forms-core/state/formfield-messages-state-reducer.js";
 import { Select } from "../../../../forms/select/Select.js";
+import {
+  NativeValidityStateKeys,
+  ValidationError
+} from "../../../../forms/validation/types.js";
 import { Grid } from "../../../../layouts/grid/Grid.js";
 import { Link } from "../../../../typography/link/Link.js";
 import { Text } from "../../../../typography/text/Text.js";
@@ -104,11 +108,9 @@ const ValueSelect = (props) => {
       messagesDispatch?.({
         type: FormFieldMessagesAction.ADDMESSAGE,
         payload: {
-          variant: "hint",
-          messageType: "formcontrol",
+          source: "strato",
           id: "no-records",
-          validityStateKey: "customError",
-          message: /* @__PURE__ */ jsx(FormattedMessage, { ...SEGMENTSELECTOR_MESSAGES.noRecords })
+          hint: /* @__PURE__ */ jsx(FormattedMessage, { ...SEGMENTSELECTOR_MESSAGES.noRecords })
         }
       });
     }
@@ -142,11 +144,9 @@ const ValueSelect = (props) => {
         messagesDispatch?.({
           type: FormFieldMessagesAction.ADDMESSAGE,
           payload: {
-            variant: "hint",
-            messageType: "formcontrol",
+            source: "strato",
             id: "unavailable-variables",
-            validityStateKey: "customError",
-            message: /* @__PURE__ */ jsx(
+            hint: /* @__PURE__ */ jsx(
               FormattedMessage,
               {
                 ...SEGMENTSELECTOR_MESSAGES.unavailableVariableValuesHint
@@ -176,14 +176,14 @@ const ValueSelect = (props) => {
           messagesDispatch?.({
             type: FormFieldMessagesAction.ADDMESSAGE,
             payload: {
-              variant: "error",
-              messageType: "formcontrol",
               id: "array-identifier",
-              validityStateKey: "customError",
-              message: /* @__PURE__ */ jsx(
-                FormattedMessage,
+              error: new ValidationError(
+                intl.formatMessage(
+                  SEGMENTSELECTOR_MESSAGES.arrayIdentifierError
+                ),
                 {
-                  ...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError
+                  source: "strato",
+                  validityStateKey: NativeValidityStateKeys.customError
                 }
               )
             }
@@ -260,17 +260,15 @@ const ValueSelect = (props) => {
             type: FormFieldMessagesAction.REMOVEMESSAGE,
             payload: {
               id: "unavailable-variables",
-              messageType: "formcontrol"
+              source: "strato"
             }
           });
           messagesDispatch?.({
             type: FormFieldMessagesAction.ADDMESSAGE,
             payload: {
-              variant: "hint",
-              messageType: "formcontrol",
+              source: "strato",
               id: "unavailable-variables",
-              validityStateKey: "customError",
-              message: /* @__PURE__ */ jsx(
+              hint: /* @__PURE__ */ jsx(
                 FormattedMessage,
                 {
                   ...SEGMENTSELECTOR_MESSAGES.unavailableRemovedHint,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/ValueSelect.tsx"],
-  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { isArray } from 'lodash-es';\nimport { useContext, useEffect, useMemo, useRef } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport type { ResultRecord } from '@dynatrace-sdk/client-query';\nimport { useDql } from '@dynatrace-sdk/react-hooks';\nimport { getSegmentVariables } from '@dynatrace-sdk/segments-presets';\n\nimport * as styles from './SegmentSelect.sty.js';\nimport { StratoLoggerContext } from '../../../../core/sdk/StratoLoggerContext.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { FormControlWithOverlayRef } from '../../../../forms/shared-types.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Link } from '../../../../typography/link/Link.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TextEllipsis } from '../../../../typography/text-ellipsis/TextEllipsis.js';\nimport {\n  segmentsClient,\n  type CachedSegment,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\nimport {\n  convertQueryRecordToStoreSegmentVariables,\n  getReadableValue,\n} from '../../utils.js';\nimport { getSegmentHref } from '../segmentManagementHref.js';\n\ntype ValueSelectProps = {\n  readOnly?: boolean;\n  segment: CachedSegment;\n  variables?: string[];\n  triggerClassName?: string;\n  unavailableVariables?: Set<string>;\n  'aria-describedby'?: string;\n};\n\n/**\n * ValueSelect component that allows the selection of variables of the segment.\n * Handles DQL-based segment variable loading, permission validation, and unavailable variable tracking.\n * @internal\n */\nexport const ValueSelect = (props: ValueSelectProps) => {\n  const {\n    triggerClassName,\n    readOnly,\n    segment,\n    variables = [],\n    unavailableVariables,\n    'aria-describedby': ariaDescribedBy,\n  } = props;\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { focusedSegmentId, isTouched } = useContext(UISegmentsContext);\n  const { updateUISegment, setArrayIdentifierError, setUnavailableVariables } =\n    useSegmentsUIContext();\n  const { dispatch: messagesDispatch } = useFormFieldMessagesContext();\n  // Tracks whether unavailable variable hint was shown in this session\n  const hasSelectedUnavailableVariables = useRef(false);\n\n  const intl = useIntl();\n\n  const stratoLogger = useContext(StratoLoggerContext);\n\n  const segmentId = segment?.segment?.id;\n\n  const dtClientContext = useMemo(\n    () =>\n      JSON.stringify({\n        source: 'SegmentSelector',\n        package: '@dynatrace/strato-components',\n        segmentId,\n      }),\n    [segmentId],\n  );\n\n  /* Extract DQL query if segment uses query-based variables; empty string triggers no fetch */\n  const query =\n    segment?.segment?.variables !== undefined &&\n    segment?.segment?.variables?.type === 'query'\n      ? segment.segment.variables.value\n      : '';\n\n  const { data: faasResult, isLoading: isFaasLoading } = useQuery(\n    // excluded segment.segment.version: keying on it would refetch on every segment edit,\n    // not just ones that change the query; overlay-reopen invalidation covers the rest.\n    // oxlint-disable-next-line @tanstack/query/exhaustive-deps\n    {\n      queryKey: ['getSegmentVariables', segment.segment.id, query],\n      queryFn: () =>\n        getSegmentVariables(segment.segment.id, segment.segment.version),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const faasVariables =\n    faasResult !== null && faasResult !== undefined && 'variables' in faasResult\n      ? faasResult.variables\n      : undefined;\n\n  useEffect(() => {\n    if (\n      faasResult?.accessible === true &&\n      'error' in faasResult &&\n      faasResult.error\n    ) {\n      stratoLogger?.warn(\n        'getSegmentVariables FaaS returned an error response.',\n        faasResult.error,\n        { id: segmentId, code: faasResult.error.code },\n      );\n    }\n  }, [faasResult, segmentId, stratoLogger]);\n\n  const { data, isLoading: isDqlLoading } = useDql(\n    {\n      query,\n      maxResultRecords: 15_000,\n      maxResultBytes: 5_242_880, // 5 MB\n      dtClientContext,\n    },\n    {\n      enabled: faasResult?.accessible === false,\n      staleTime: 60 * 1000, // 1 minute\n    },\n  );\n\n  const effectiveRecords: ResultRecord[] | undefined =\n    faasVariables ?? data?.records;\n  const isLoading = isFaasLoading || isDqlLoading;\n\n  /* Log and display hint when query completes with no records (typically permission denied) */\n  useEffect(() => {\n    if (!isLoading && !effectiveRecords?.length) {\n      stratoLogger?.info(\n        'Failed to retrieve segment variables: query returned no records.',\n        {\n          query: query.split('|')[0], // log query until first pipe to avoid reporting sensitive data.\n          id: segmentId,\n        },\n      );\n\n      messagesDispatch?.({\n        type: FormFieldMessagesAction.ADDMESSAGE,\n        payload: {\n          variant: 'hint',\n          messageType: 'formcontrol',\n          id: 'no-records',\n          validityStateKey: 'customError',\n          message: <FormattedMessage {...SEGMENTSELECTOR_MESSAGES.noRecords} />,\n        },\n      });\n    }\n\n    // only update when the query changed and is not loading, to prevent multiple logs.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [query, isLoading]);\n\n  /**\n   * Identifies variables that were previously selected but are no longer available.\n   * Returns three states:\n   * - undefined: query is still loading\n   * - Set with items: variables no longer in query results (permission lost or deleted)\n   * - Set empty: all variables available\n   */\n  const computedUnavailableVariables = useMemo(() => {\n    if (isLoading) {\n      return undefined;\n    }\n\n    if (effectiveRecords) {\n      const firstKey = Object.keys(effectiveRecords?.[0] ?? {})[0];\n      const dataRecordIds = new Set(\n        effectiveRecords.map((record) => record?.[firstKey]),\n      );\n      const unavailable = variables.filter(\n        (variable) => !dataRecordIds.has(variable),\n      );\n      return new Set([...unavailable, ...(unavailableVariables ?? [])]);\n    }\n\n    // DQL failed or forbidden \u2014 all initially-applied variables are unavailable\n    return new Set(variables);\n    // excluded variables as the selection doesn't change while open (avoids unexpected re-renders).\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [effectiveRecords, isLoading]);\n\n  /* Update parent state with unavailable variables once DQL settles; ref guards against duplicate dispatches */\n  useEffect(() => {\n    if (\n      !isLoading &&\n      computedUnavailableVariables &&\n      computedUnavailableVariables.size > 0\n    ) {\n      setUnavailableVariables(\n        segment.segment.id,\n        new Set([\n          ...computedUnavailableVariables,\n          ...(unavailableVariables ?? []),\n        ]),\n      );\n\n      // Show hint only once when unavailable variables are first detected (with data present)\n      if (!unavailableVariables && effectiveRecords) {\n        messagesDispatch?.({\n          type: FormFieldMessagesAction.ADDMESSAGE,\n          payload: {\n            variant: 'hint',\n            messageType: 'formcontrol',\n            id: 'unavailable-variables',\n            validityStateKey: 'customError',\n            message: (\n              <FormattedMessage\n                {...SEGMENTSELECTOR_MESSAGES.unavailableVariableValuesHint}\n              />\n            ),\n          },\n        });\n        hasSelectedUnavailableVariables.current = true;\n      }\n    }\n    // excluded propUnavailableVariables as it is derrived from the created state and might cause unnecessary re-renders. The state is only set once when the DQL settles, and then managed internally.\n    // excluded messagesDispatch from deps to avoid re-adding the hint when the parent component re-renders with a new prop value. The state is only set once when the DQL settles, and then managed internally.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLoading, computedUnavailableVariables, segment.segment.id]);\n\n  /**\n   * Extracts all unique variable identifiers from DQL results and validates for unsupported array fields.\n   * Uses queueMicrotask to delay array error dispatch, ensuring state consistency before render.\n   */\n  const availableVariables = useMemo(() => {\n    if (effectiveRecords) {\n      let hasArrayIdentifier = false;\n      const recordsArray = effectiveRecords\n        .map((singleRow) => {\n          const firstKey = singleRow ? Object.keys(singleRow)[0] : null;\n\n          if (!singleRow || !firstKey) {\n            return null;\n          }\n\n          // Detect if query returns array-type fields (not supported for segment selection)\n          if (isArray(singleRow[firstKey])) {\n            hasArrayIdentifier = true;\n          }\n\n          return `${singleRow[firstKey]}`;\n        })\n        .filter((value) => value !== 'null' && value !== null);\n\n      /**\n       * Array field detection requires iterating over data; to avoid re-examining data,\n       * dispatch error via queueMicrotask after this render to maintain state consistency.\n       */\n      queueMicrotask(() => {\n        if (hasArrayIdentifier) {\n          messagesDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              variant: 'error',\n              messageType: 'formcontrol',\n              id: 'array-identifier',\n              validityStateKey: 'customError',\n              message: (\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n                />\n              ),\n            },\n          });\n        }\n        setArrayIdentifierError(hasArrayIdentifier, segment.segment.id);\n      });\n\n      return Array.from(new Set(recordsArray));\n    }\n\n    return undefined;\n    // Excluded messagesDispatch and setArrayIdentifierError from deps to avoid rerenders due to unstable function references.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [effectiveRecords, segment.segment.id]);\n\n  // Auto-open select dropdown when segment is focused and user is interacting\n  const shouldOpen =\n    focusedSegmentId === segment.segment.id &&\n    variables.length === 0 &&\n    isTouched;\n\n  useEffect(() => {\n    shouldOpen && variableSelectRef.current?.open();\n  }, [shouldOpen]);\n\n  // Validate select when touched state changes or selected variables change\n  useEffect(() => {\n    // initially\n    !isTouched && variableSelectRef.current?.validate();\n    // we need to validate the select when the variables change\n    // this needs to be properly resolved in the select component,\n    // as this one needs to validate controlled values automatically.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [isTouched, JSON.stringify(variables)]);\n\n  return (\n    <Select\n      ref={variableSelectRef}\n      multiple\n      className={styles.variablesSelectCSS}\n      required\n      readOnly={readOnly || segment?.temporarilyApplied}\n      clearable={false}\n      value={variables}\n      onChange={(newVariables) => {\n        // Clear selection when user removes all variables\n        if (!newVariables || newVariables.length === 0) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: [],\n            },\n          );\n          return;\n        }\n\n        if (!effectiveRecords || effectiveRecords.length === 0) {\n          return;\n        }\n\n        // Enrich selected variable IDs with full record containing all fields\n        const firstKey = Object.keys(effectiveRecords?.[0] ?? {})[0];\n        const dataEnrichedVariables = newVariables\n          .map((variable) => {\n            return (\n              effectiveRecords?.find((singleRow) => {\n                if (isArray(singleRow?.[firstKey])) {\n                  const values = singleRow?.[firstKey].includes(variable);\n                  return values;\n                }\n\n                return singleRow && singleRow[firstKey] === variable;\n              }) ?? null\n            );\n          })\n          .filter((value) => value !== null);\n\n        const segmentVariables = convertQueryRecordToStoreSegmentVariables(\n          dataEnrichedVariables,\n        );\n\n        if (segmentVariables) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: segmentVariables,\n            },\n          );\n        }\n\n        if (\n          segmentVariables &&\n          computedUnavailableVariables &&\n          computedUnavailableVariables.size > 0 &&\n          hasSelectedUnavailableVariables.current\n        ) {\n          hasSelectedUnavailableVariables.current = false;\n          // Replace hint about unavailable variables during selection with summary after close\n          messagesDispatch?.({\n            type: FormFieldMessagesAction.REMOVEMESSAGE,\n            payload: {\n              id: 'unavailable-variables',\n              messageType: 'formcontrol',\n            },\n          });\n\n          messagesDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              variant: 'hint',\n              messageType: 'formcontrol',\n              id: 'unavailable-variables',\n              validityStateKey: 'customError',\n              message: (\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.unavailableRemovedHint}\n                  values={{ count: computedUnavailableVariables?.size ?? 0 }}\n                />\n              ),\n            },\n          });\n        }\n      }}\n      aria-describedby={ariaDescribedBy}\n      data-dt-name=\"segment-variable-select\"\n      name={`segment-variable-select${segment.segment.id}`}\n    >\n      <Select.Trigger\n        className={clsx(styles.variablesSelectTriggerCSS, triggerClassName)}\n        placeholder={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.segmentsVariableTriggerPlaceholder,\n        )}\n      >\n        {variables?.length > 0 && (\n          <Select.DisplayValue>\n            <TextEllipsis>\n              {variables\n                .map((variable) => getReadableValue(variable, intl))\n                .join(', ')}\n            </TextEllipsis>\n          </Select.DisplayValue>\n        )}\n      </Select.Trigger>\n      <Select.Filter />\n      <Select.Content\n        loading={isLoading}\n        showSelectedOptionsFirst\n        width=\"trigger\"\n      >\n        {/** Show currently selected variables while DQL loads (prevents flicker) */}\n        {!effectiveRecords &&\n          variables?.map((variable) => (\n            <Select.Option\n              key={variable}\n              value={variable}\n              textValue={getReadableValue(variable, intl) ?? undefined}\n            >\n              {getReadableValue(variable, intl)}\n            </Select.Option>\n          ))}\n        {/** Always render unavailable variables as disabled options (shows user why selections are locked) */}\n        {Array.from(computedUnavailableVariables ?? []).map(\n          (unlistedVariable) => (\n            <Select.Option\n              key={unlistedVariable}\n              value={unlistedVariable}\n              textValue={getReadableValue(unlistedVariable, intl) ?? undefined}\n              aria-label={`${\n                getReadableValue(unlistedVariable, intl) ?? unlistedVariable\n              } ${intl.formatMessage(SEGMENTSELECTOR_MESSAGES.unavailable)}`}\n              disabled={true}\n            >\n              <Grid\n                gridTemplateColumns=\"auto auto\"\n                width=\"100%\"\n                alignItems=\"baseline\"\n              >\n                <Text>{getReadableValue(unlistedVariable, intl)}</Text>\n                <Text\n                  textStyle=\"small\"\n                  style={{\n                    color: Colors.Text.Neutral.Subdued,\n                    textAlign: 'right',\n                    textWrap: 'nowrap',\n                  }}\n                >\n                  {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.unavailable)}\n                </Text>\n              </Grid>\n            </Select.Option>\n          ),\n        )}\n        {availableVariables?.map((variable) => (\n          <Select.Option\n            key={variable}\n            value={variable}\n            textValue={getReadableValue(variable, intl) ?? undefined}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}{' '}\n            <Text>{getReadableValue(variable, intl)}</Text>\n          </Select.Option>\n        ))}\n        <Select.EmptyState>\n          {effectiveRecords?.length ? (\n            <FormattedMessage\n              id=\"nIw/xeiGNJsj+a+5\"\n              defaultMessage=\"No matching values for this segment found.\"\n              description=\"Hint shown when searching for a segment variable that isn't in the list.\"\n            />\n          ) : (\n            <FormattedMessage\n              defaultMessage=\"No values for this segment available. You can manage this segment in {link}.\"\n              id=\"72DlIwYKB9UTEzlA\"\n              description=\"Empty state message if no variables for the segment are available.\"\n              values={{\n                link: (\n                  <Link\n                    href={getSegmentHref(segment.segment.id)}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    <FormattedMessage\n                      defaultMessage=\"settings\"\n                      id=\"u55UYpLvXi//xGEn\"\n                      description=\"Link text to segments app in empty state message if no variables for the segment are available.\"\n                    />\n                  </Link>\n                ),\n              }}\n            />\n          )}\n        </Select.EmptyState>\n      </Select.Content>\n    </Select>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { isArray } from 'lodash-es';\nimport { useContext, useEffect, useMemo, useRef } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport type { ResultRecord } from '@dynatrace-sdk/client-query';\nimport { useDql } from '@dynatrace-sdk/react-hooks';\nimport { getSegmentVariables } from '@dynatrace-sdk/segments-presets';\n\nimport * as styles from './SegmentSelect.sty.js';\nimport { StratoLoggerContext } from '../../../../core/sdk/StratoLoggerContext.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { FormControlWithOverlayRef } from '../../../../forms/shared-types.js';\nimport {\n  NativeValidityStateKeys,\n  ValidationError,\n} from '../../../../forms/validation/types.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Link } from '../../../../typography/link/Link.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TextEllipsis } from '../../../../typography/text-ellipsis/TextEllipsis.js';\nimport {\n  segmentsClient,\n  type CachedSegment,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\nimport {\n  convertQueryRecordToStoreSegmentVariables,\n  getReadableValue,\n} from '../../utils.js';\nimport { getSegmentHref } from '../segmentManagementHref.js';\n\ntype ValueSelectProps = {\n  readOnly?: boolean;\n  segment: CachedSegment;\n  variables?: string[];\n  triggerClassName?: string;\n  unavailableVariables?: Set<string>;\n  'aria-describedby'?: string;\n};\n\n/**\n * ValueSelect component that allows the selection of variables of the segment.\n * Handles DQL-based segment variable loading, permission validation, and unavailable variable tracking.\n * @internal\n */\nexport const ValueSelect = (props: ValueSelectProps) => {\n  const {\n    triggerClassName,\n    readOnly,\n    segment,\n    variables = [],\n    unavailableVariables,\n    'aria-describedby': ariaDescribedBy,\n  } = props;\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { focusedSegmentId, isTouched } = useContext(UISegmentsContext);\n  const { updateUISegment, setArrayIdentifierError, setUnavailableVariables } =\n    useSegmentsUIContext();\n  const { dispatch: messagesDispatch } = useFormFieldMessagesContext();\n  // Tracks whether unavailable variable hint was shown in this session\n  const hasSelectedUnavailableVariables = useRef(false);\n\n  const intl = useIntl();\n\n  const stratoLogger = useContext(StratoLoggerContext);\n\n  const segmentId = segment?.segment?.id;\n\n  const dtClientContext = useMemo(\n    () =>\n      JSON.stringify({\n        source: 'SegmentSelector',\n        package: '@dynatrace/strato-components',\n        segmentId,\n      }),\n    [segmentId],\n  );\n\n  /* Extract DQL query if segment uses query-based variables; empty string triggers no fetch */\n  const query =\n    segment?.segment?.variables !== undefined &&\n    segment?.segment?.variables?.type === 'query'\n      ? segment.segment.variables.value\n      : '';\n\n  const { data: faasResult, isLoading: isFaasLoading } = useQuery(\n    // excluded segment.segment.version: keying on it would refetch on every segment edit,\n    // not just ones that change the query; overlay-reopen invalidation covers the rest.\n    // oxlint-disable-next-line @tanstack/query/exhaustive-deps\n    {\n      queryKey: ['getSegmentVariables', segment.segment.id, query],\n      queryFn: () =>\n        getSegmentVariables(segment.segment.id, segment.segment.version),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const faasVariables =\n    faasResult !== null && faasResult !== undefined && 'variables' in faasResult\n      ? faasResult.variables\n      : undefined;\n\n  useEffect(() => {\n    if (\n      faasResult?.accessible === true &&\n      'error' in faasResult &&\n      faasResult.error\n    ) {\n      stratoLogger?.warn(\n        'getSegmentVariables FaaS returned an error response.',\n        faasResult.error,\n        { id: segmentId, code: faasResult.error.code },\n      );\n    }\n  }, [faasResult, segmentId, stratoLogger]);\n\n  const { data, isLoading: isDqlLoading } = useDql(\n    {\n      query,\n      maxResultRecords: 15_000,\n      maxResultBytes: 5_242_880, // 5 MB\n      dtClientContext,\n    },\n    {\n      enabled: faasResult?.accessible === false,\n      staleTime: 60 * 1000, // 1 minute\n    },\n  );\n\n  const effectiveRecords: ResultRecord[] | undefined =\n    faasVariables ?? data?.records;\n  const isLoading = isFaasLoading || isDqlLoading;\n\n  /* Log and display hint when query completes with no records (typically permission denied) */\n  useEffect(() => {\n    if (!isLoading && !effectiveRecords?.length) {\n      stratoLogger?.info(\n        'Failed to retrieve segment variables: query returned no records.',\n        {\n          query: query.split('|')[0], // log query until first pipe to avoid reporting sensitive data.\n          id: segmentId,\n        },\n      );\n\n      messagesDispatch?.({\n        type: FormFieldMessagesAction.ADDMESSAGE,\n        payload: {\n          source: 'strato',\n          id: 'no-records',\n          hint: <FormattedMessage {...SEGMENTSELECTOR_MESSAGES.noRecords} />,\n        },\n      });\n    }\n\n    // only update when the query changed and is not loading, to prevent multiple logs.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [query, isLoading]);\n\n  /**\n   * Identifies variables that were previously selected but are no longer available.\n   * Returns three states:\n   * - undefined: query is still loading\n   * - Set with items: variables no longer in query results (permission lost or deleted)\n   * - Set empty: all variables available\n   */\n  const computedUnavailableVariables = useMemo(() => {\n    if (isLoading) {\n      return undefined;\n    }\n\n    if (effectiveRecords) {\n      const firstKey = Object.keys(effectiveRecords?.[0] ?? {})[0];\n      const dataRecordIds = new Set(\n        effectiveRecords.map((record) => record?.[firstKey]),\n      );\n      const unavailable = variables.filter(\n        (variable) => !dataRecordIds.has(variable),\n      );\n      return new Set([...unavailable, ...(unavailableVariables ?? [])]);\n    }\n\n    // DQL failed or forbidden \u2014 all initially-applied variables are unavailable\n    return new Set(variables);\n    // excluded variables as the selection doesn't change while open (avoids unexpected re-renders).\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [effectiveRecords, isLoading]);\n\n  /* Update parent state with unavailable variables once DQL settles; ref guards against duplicate dispatches */\n  useEffect(() => {\n    if (\n      !isLoading &&\n      computedUnavailableVariables &&\n      computedUnavailableVariables.size > 0\n    ) {\n      setUnavailableVariables(\n        segment.segment.id,\n        new Set([\n          ...computedUnavailableVariables,\n          ...(unavailableVariables ?? []),\n        ]),\n      );\n\n      // Show hint only once when unavailable variables are first detected (with data present)\n      if (!unavailableVariables && effectiveRecords) {\n        messagesDispatch?.({\n          type: FormFieldMessagesAction.ADDMESSAGE,\n          payload: {\n            source: 'strato',\n            id: 'unavailable-variables',\n            hint: (\n              <FormattedMessage\n                {...SEGMENTSELECTOR_MESSAGES.unavailableVariableValuesHint}\n              />\n            ),\n          },\n        });\n        hasSelectedUnavailableVariables.current = true;\n      }\n    }\n    // excluded propUnavailableVariables as it is derrived from the created state and might cause unnecessary re-renders. The state is only set once when the DQL settles, and then managed internally.\n    // excluded messagesDispatch from deps to avoid re-adding the hint when the parent component re-renders with a new prop value. The state is only set once when the DQL settles, and then managed internally.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLoading, computedUnavailableVariables, segment.segment.id]);\n\n  /**\n   * Extracts all unique variable identifiers from DQL results and validates for unsupported array fields.\n   * Uses queueMicrotask to delay array error dispatch, ensuring state consistency before render.\n   */\n  const availableVariables = useMemo(() => {\n    if (effectiveRecords) {\n      let hasArrayIdentifier = false;\n      const recordsArray = effectiveRecords\n        .map((singleRow) => {\n          const firstKey = singleRow ? Object.keys(singleRow)[0] : null;\n\n          if (!singleRow || !firstKey) {\n            return null;\n          }\n\n          // Detect if query returns array-type fields (not supported for segment selection)\n          if (isArray(singleRow[firstKey])) {\n            hasArrayIdentifier = true;\n          }\n\n          return `${singleRow[firstKey]}`;\n        })\n        .filter((value) => value !== 'null' && value !== null);\n\n      /**\n       * Array field detection requires iterating over data; to avoid re-examining data,\n       * dispatch error via queueMicrotask after this render to maintain state consistency.\n       */\n      queueMicrotask(() => {\n        if (hasArrayIdentifier) {\n          messagesDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              id: 'array-identifier',\n              error: new ValidationError(\n                intl.formatMessage(\n                  SEGMENTSELECTOR_MESSAGES.arrayIdentifierError,\n                ),\n                {\n                  source: 'strato',\n                  validityStateKey: NativeValidityStateKeys.customError,\n                },\n              ),\n            },\n          });\n        }\n        setArrayIdentifierError(hasArrayIdentifier, segment.segment.id);\n      });\n\n      return Array.from(new Set(recordsArray));\n    }\n\n    return undefined;\n    // Excluded messagesDispatch and setArrayIdentifierError from deps to avoid rerenders due to unstable function references.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [effectiveRecords, segment.segment.id]);\n\n  // Auto-open select dropdown when segment is focused and user is interacting\n  const shouldOpen =\n    focusedSegmentId === segment.segment.id &&\n    variables.length === 0 &&\n    isTouched;\n\n  useEffect(() => {\n    shouldOpen && variableSelectRef.current?.open();\n  }, [shouldOpen]);\n\n  // Validate select when touched state changes or selected variables change\n  useEffect(() => {\n    // initially\n    !isTouched && variableSelectRef.current?.validate();\n    // we need to validate the select when the variables change\n    // this needs to be properly resolved in the select component,\n    // as this one needs to validate controlled values automatically.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [isTouched, JSON.stringify(variables)]);\n\n  return (\n    <Select\n      ref={variableSelectRef}\n      multiple\n      className={styles.variablesSelectCSS}\n      required\n      readOnly={readOnly || segment?.temporarilyApplied}\n      clearable={false}\n      value={variables}\n      onChange={(newVariables) => {\n        // Clear selection when user removes all variables\n        if (!newVariables || newVariables.length === 0) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: [],\n            },\n          );\n          return;\n        }\n\n        if (!effectiveRecords || effectiveRecords.length === 0) {\n          return;\n        }\n\n        // Enrich selected variable IDs with full record containing all fields\n        const firstKey = Object.keys(effectiveRecords?.[0] ?? {})[0];\n        const dataEnrichedVariables = newVariables\n          .map((variable) => {\n            return (\n              effectiveRecords?.find((singleRow) => {\n                if (isArray(singleRow?.[firstKey])) {\n                  const values = singleRow?.[firstKey].includes(variable);\n                  return values;\n                }\n\n                return singleRow && singleRow[firstKey] === variable;\n              }) ?? null\n            );\n          })\n          .filter((value) => value !== null);\n\n        const segmentVariables = convertQueryRecordToStoreSegmentVariables(\n          dataEnrichedVariables,\n        );\n\n        if (segmentVariables) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: segmentVariables,\n            },\n          );\n        }\n\n        if (\n          segmentVariables &&\n          computedUnavailableVariables &&\n          computedUnavailableVariables.size > 0 &&\n          hasSelectedUnavailableVariables.current\n        ) {\n          hasSelectedUnavailableVariables.current = false;\n          // Replace hint about unavailable variables during selection with summary after close\n          messagesDispatch?.({\n            type: FormFieldMessagesAction.REMOVEMESSAGE,\n            payload: {\n              id: 'unavailable-variables',\n              source: 'strato',\n            },\n          });\n\n          messagesDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              source: 'strato',\n              id: 'unavailable-variables',\n              hint: (\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.unavailableRemovedHint}\n                  values={{ count: computedUnavailableVariables?.size ?? 0 }}\n                />\n              ),\n            },\n          });\n        }\n      }}\n      aria-describedby={ariaDescribedBy}\n      data-dt-name=\"segment-variable-select\"\n      name={`segment-variable-select${segment.segment.id}`}\n    >\n      <Select.Trigger\n        className={clsx(styles.variablesSelectTriggerCSS, triggerClassName)}\n        placeholder={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.segmentsVariableTriggerPlaceholder,\n        )}\n      >\n        {variables?.length > 0 && (\n          <Select.DisplayValue>\n            <TextEllipsis>\n              {variables\n                .map((variable) => getReadableValue(variable, intl))\n                .join(', ')}\n            </TextEllipsis>\n          </Select.DisplayValue>\n        )}\n      </Select.Trigger>\n      <Select.Filter />\n      <Select.Content\n        loading={isLoading}\n        showSelectedOptionsFirst\n        width=\"trigger\"\n      >\n        {/** Show currently selected variables while DQL loads (prevents flicker) */}\n        {!effectiveRecords &&\n          variables?.map((variable) => (\n            <Select.Option\n              key={variable}\n              value={variable}\n              textValue={getReadableValue(variable, intl) ?? undefined}\n            >\n              {getReadableValue(variable, intl)}\n            </Select.Option>\n          ))}\n        {/** Always render unavailable variables as disabled options (shows user why selections are locked) */}\n        {Array.from(computedUnavailableVariables ?? []).map(\n          (unlistedVariable) => (\n            <Select.Option\n              key={unlistedVariable}\n              value={unlistedVariable}\n              textValue={getReadableValue(unlistedVariable, intl) ?? undefined}\n              aria-label={`${\n                getReadableValue(unlistedVariable, intl) ?? unlistedVariable\n              } ${intl.formatMessage(SEGMENTSELECTOR_MESSAGES.unavailable)}`}\n              disabled={true}\n            >\n              <Grid\n                gridTemplateColumns=\"auto auto\"\n                width=\"100%\"\n                alignItems=\"baseline\"\n              >\n                <Text>{getReadableValue(unlistedVariable, intl)}</Text>\n                <Text\n                  textStyle=\"small\"\n                  style={{\n                    color: Colors.Text.Neutral.Subdued,\n                    textAlign: 'right',\n                    textWrap: 'nowrap',\n                  }}\n                >\n                  {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.unavailable)}\n                </Text>\n              </Grid>\n            </Select.Option>\n          ),\n        )}\n        {availableVariables?.map((variable) => (\n          <Select.Option\n            key={variable}\n            value={variable}\n            textValue={getReadableValue(variable, intl) ?? undefined}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}{' '}\n            <Text>{getReadableValue(variable, intl)}</Text>\n          </Select.Option>\n        ))}\n        <Select.EmptyState>\n          {effectiveRecords?.length ? (\n            <FormattedMessage\n              id=\"nIw/xeiGNJsj+a+5\"\n              defaultMessage=\"No matching values for this segment found.\"\n              description=\"Hint shown when searching for a segment variable that isn't in the list.\"\n            />\n          ) : (\n            <FormattedMessage\n              defaultMessage=\"No values for this segment available. You can manage this segment in {link}.\"\n              id=\"72DlIwYKB9UTEzlA\"\n              description=\"Empty state message if no variables for the segment are available.\"\n              values={{\n                link: (\n                  <Link\n                    href={getSegmentHref(segment.segment.id)}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    <FormattedMessage\n                      defaultMessage=\"settings\"\n                      id=\"u55UYpLvXi//xGEn\"\n                      description=\"Link text to segments app in empty state message if no variables for the segment are available.\"\n                    />\n                  </Link>\n                ),\n              }}\n            />\n          )}\n        </Select.EmptyState>\n      </Select.Content>\n    </Select>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,8 +1,8 @@
-._1sqhmjg0-3-13-2 {
+._1sqhmjg0-3-14-0 {
   min-width: 0;
   box-sizing: border-box;
 }
-._1sqhmjg1-3-13-2 {
+._1sqhmjg1-3-14-0 {
   display: inline-flex;
   align-self: start;
 }

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

@@ -8,6 +8,7 @@ import {
   useRef,
   useState
 } from "react";
+import { useIntl } from "react-intl";
 import { PresetItem } from "./components/presets/PresetItem.js";
 import { Presets } from "./components/presets/Presets.js";
 import { CustomTrigger } from "./components/trigger/CustomTrigger.js";
@@ -36,12 +37,14 @@ import {
 } from "../../forms/forms-core/time/timeParser.js";
 const STEPPER_DEBOUNCE_MS = 300;
 function useSyncPropsAndState(store, memoedValue, isControlled, precision, formatString, required, formFieldMessagesDispatch, timeframeSelectorRef, debouncedOnChangeRef) {
+  const intl = useIntl();
   useEffect(
     () => {
       isControlled && store.setState((state) => {
         debouncedOnChangeRef?.current?.cancel();
         const error = validate(memoedValue ?? null, state.min, state.max, {
           formMessageDispatch: formFieldMessagesDispatch,
+          intl,
           showError: false,
           checkOrder: true,
           ref: timeframeSelectorRef,
@@ -119,6 +122,7 @@ const _TimeframeSelector = forwardRef(
     controlState,
     // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
     precision = "minutes",
+    onValidityChange,
     ...remainingProps
   }, forwardedRef) => {
     const [isControlled] = useState(propValue !== void 0);
@@ -138,6 +142,7 @@ const _TimeframeSelector = forwardRef(
     const dateTimeFromRef = useRef(null);
     const dateTimeRangePickerRef = useRef(null);
     const timeframeSelectorRef = useRef(null);
+    const intl = useIntl();
     const { formatString } = useDateTimeMessages({ precision });
     const formControl = useFormControl({
       propDisabled,
@@ -164,6 +169,7 @@ const _TimeframeSelector = forwardRef(
       const value = isControlled ? memoedValue : memoedDefaultValue;
       const error = validate(value, min, max, {
         formMessageDispatch: formFieldMessagesDispatch,
+        intl,
         precision,
         showError: false,
         checkOrder: true,
@@ -211,7 +217,8 @@ const _TimeframeSelector = forwardRef(
           formFieldMessagesDispatch,
           onChangeProp,
           debouncedOnChangeRef,
-          TIMEFRAMESELECTOR_ERROR_MESSAGES
+          TIMEFRAMESELECTOR_ERROR_MESSAGES,
+          intl
         )
       )
     );
@@ -234,6 +241,7 @@ const _TimeframeSelector = forwardRef(
         (state, min2, max2) => {
           const error = validate(state.timeframeSelectorTimeframe, min2, max2, {
             formMessageDispatch: formFieldMessagesDispatch,
+            intl,
             formerError: state.timeframeSelectorError,
             precision: state.precision,
             showError: false,
@@ -250,7 +258,7 @@ const _TimeframeSelector = forwardRef(
             dateTimeRangePickerError: error
           };
         },
-        [formFieldMessagesDispatch]
+        [formFieldMessagesDispatch, intl]
       )
     );
     const mergedRef = useMergeRefs([
@@ -262,6 +270,7 @@ const _TimeframeSelector = forwardRef(
       {
         ...remainingProps,
         formControl,
+        onValidityChange: controlState ? void 0 : onValidityChange,
         ref: mergedRef
       }
     ) });