@dynatrace/strato-components 3.12.2 → 3.13.2

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelect.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useContext, useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './SegmentSelect.sty.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { isDev } from '../../../../core/utils/is-node-environment.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { FormControlWithOverlayRef } from '../../../../forms/shared-types.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\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';\n\ntype SegmentsSelectProps = {\n  id: string;\n  availableSegments: CachedSegment['segment'][];\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  segment?: CachedSegment | null;\n  overlayWidth: string;\n  triggerClassName?: string;\n  isPlaceholder?: boolean;\n  'aria-describedby'?: string;\n};\n\nfunction getSafeSegmentName(\n  segment: CachedSegment['segment'] | null | undefined,\n  fallback: string,\n) {\n  return segment?.name && segment.name !== '' ? segment.name : fallback;\n}\n\n/**\n * SegmentsSelect component\n * @internal\n */\nexport const SegmentSelect = forwardRef<\n  FormControlWithOverlayRef<HTMLDivElement>,\n  SegmentsSelectProps\n>((props, forwardedRef) => {\n  const {\n    availableSegments,\n    readOnly,\n    triggerClassName,\n    overlayWidth,\n    segment: cachedSegment,\n    autoFocus,\n    isPlaceholder,\n    id,\n    'aria-describedby': ariaDescribedBy,\n  } = props;\n  const intl = useIntl();\n\n  const segmentSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n  const mergedRef = useMergeRefs([forwardedRef, segmentSelectRef]);\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { updateUISegment, removeUISegment } = useSegmentsUIContext();\n\n  const { getSegment } = useSegmentsCache();\n\n  const { uiSegments } = useContext(UISegmentsContext);\n\n  const refIsDefined = segmentSelectRef.current !== null;\n\n  useEffect(() => {\n    segmentsClient.hasAccessRights && segmentSelectRef.current?.validate();\n    // We only want to shift the focus initially if it has autofocus (typically first select on open).\n    // when the first selected one is cleared and replaced by the placeholder we want to focus the select, but not open it.\n    if (uiSegments.length === 1 || autoFocus) {\n      segmentSelectRef.current?.focus?.();\n      return;\n    }\n\n    // If a new placeholder is added it should be opened.\n    // The open also moves the focus to the hidden input which isn't available on first render.\n    if (isPlaceholder && !autoFocus) {\n      segmentSelectRef.current?.open();\n    }\n\n    // The hidden trigger ref (coming from the react select) is not defined after the first render and,\n    // therefore, we must manually check the existence and then only once trigger the focus.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [refIsDefined]);\n\n  return (\n    <Select\n      ref={mergedRef}\n      className={styles.segmentsSelectCSS}\n      value={id}\n      id={id}\n      required={!isPlaceholder}\n      clearable={false}\n      readOnly={readOnly || cachedSegment?.temporarilyApplied}\n      aria-describedby={ariaDescribedBy}\n      onOpenChange={(isOpen) => {\n        if (isOpen) {\n          return;\n        }\n\n        variableSelectRef.current?.open();\n      }}\n      onChange={(segmentUid) => {\n        if (segmentUid) {\n          getSegment(segmentUid)\n            .then((newSegment) => {\n              updateUISegment(\n                { id },\n                {\n                  ...newSegment.segment,\n                  variables: !newSegment.segment.variables ? undefined : [],\n                },\n              );\n            })\n            .catch((error) => {\n              if (isDev()) {\n                // eslint-disable-next-line no-console\n                console.log(\n                  `SegmentSelector: fetching the segment with id ${id} failed.`,\n                  error,\n                );\n              }\n              removeUISegment(id);\n            });\n        }\n      }}\n      data-dt-name=\"segment-select\"\n    >\n      <Select.Trigger\n        width=\"full\"\n        className={clsx(triggerClassName, {\n          [styles.segmentsSelectTriggerCSS]: cachedSegment?.segment?.variables,\n        })}\n        placeholder={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.segmentsTriggerPlaceholder,\n        )}\n      />\n      <Select.Filter />\n      <Select.Content showSelectedOptionsFirst width={overlayWidth}>\n        <Select.EmptyState>\n          {availableSegments.length === 0\n            ? intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.segmentsSelectEmptyState,\n              )\n            : intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.segmentsSelectEmptyStateSearch,\n              )}\n        </Select.EmptyState>\n\n        {/**\n         * The availableSegments removes the current selection to only show the other options.\n         * This would also clear the select value and therefore this one is additionally rendered.\n         */}\n        {((id && !isPlaceholder) || cachedSegment?.segment) && (\n          <Select.Option\n            value={id}\n            key={id}\n            textValue={getSafeSegmentName(cachedSegment?.segment, id)}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}\n            <Text>{getSafeSegmentName(cachedSegment?.segment, id)}</Text>\n          </Select.Option>\n        )}\n        {availableSegments.map((segmentOption) => (\n          <Select.Option\n            key={segmentOption.id}\n            value={segmentOption.id}\n            textValue={getSafeSegmentName(segmentOption, segmentOption.id)}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}\n            <Text>{getSafeSegmentName(segmentOption, segmentOption.id)}</Text>\n          </Select.Option>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n});\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useContext, useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './SegmentSelect.sty.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { isDev } from '../../../../core/utils/is-node-environment.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { FormControlWithOverlayRef } from '../../../../forms/shared-types.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\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';\n\ntype SegmentsSelectProps = {\n  id: string;\n  availableSegments: CachedSegment['segment'][];\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  segment?: CachedSegment | null;\n  overlayWidth: string;\n  triggerClassName?: string;\n  isPlaceholder?: boolean;\n  'aria-describedby'?: string;\n};\n\nfunction getSafeSegmentName(\n  segment: CachedSegment['segment'] | null | undefined,\n  fallback: string,\n) {\n  return segment?.name && segment.name !== '' ? segment.name : fallback;\n}\n\n/**\n * SegmentsSelect component\n * @internal\n */\nexport const SegmentSelect = forwardRef<\n  FormControlWithOverlayRef<HTMLDivElement>,\n  SegmentsSelectProps\n>((props, forwardedRef) => {\n  const {\n    availableSegments,\n    readOnly,\n    triggerClassName,\n    overlayWidth,\n    segment: cachedSegment,\n    autoFocus,\n    isPlaceholder,\n    id,\n    'aria-describedby': ariaDescribedBy,\n  } = props;\n  const intl = useIntl();\n\n  const segmentSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n  const mergedRef = useMergeRefs([forwardedRef, segmentSelectRef]);\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { updateUISegment, removeUISegment } = useSegmentsUIContext();\n\n  const { getSegment } = useSegmentsCache();\n\n  const { uiSegments } = useContext(UISegmentsContext);\n\n  const refIsDefined = segmentSelectRef.current !== null;\n\n  useEffect(() => {\n    segmentsClient.hasAccessRights && segmentSelectRef.current?.validate();\n    // We only want to shift the focus initially if it has autofocus (typically first select on open).\n    // when the first selected one is cleared and replaced by the placeholder we want to focus the select, but not open it.\n    if (uiSegments.length === 1 || autoFocus) {\n      segmentSelectRef.current?.focus?.();\n      return;\n    }\n\n    // If a new placeholder is added it should be opened.\n    // The open also moves the focus to the hidden input which isn't available on first render.\n    if (isPlaceholder && !autoFocus) {\n      segmentSelectRef.current?.open();\n    }\n\n    // The hidden trigger ref (coming from the react select) is not defined after the first render and,\n    // therefore, we must manually check the existence and then only once trigger the focus.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [refIsDefined]);\n\n  return (\n    <Select\n      ref={mergedRef}\n      className={styles.segmentsSelectCSS}\n      value={id}\n      id={id}\n      required={!isPlaceholder}\n      clearable={false}\n      readOnly={readOnly || cachedSegment?.temporarilyApplied}\n      aria-describedby={ariaDescribedBy}\n      onOpenChange={(isOpen) => {\n        if (isOpen) {\n          return;\n        }\n\n        variableSelectRef.current?.open();\n      }}\n      onChange={(segmentUid) => {\n        if (segmentUid) {\n          getSegment(segmentUid)\n            .then((newSegment) => {\n              updateUISegment(\n                { id },\n                {\n                  ...newSegment.segment,\n                  variables: !newSegment.segment.variables ? undefined : [],\n                },\n              );\n            })\n            .catch((error) => {\n              if (isDev()) {\n                // oxlint-disable-next-line no-console\n                console.log(\n                  `SegmentSelector: fetching the segment with id ${id} failed.`,\n                  error,\n                );\n              }\n              removeUISegment(id);\n            });\n        }\n      }}\n      data-dt-name=\"segment-select\"\n    >\n      <Select.Trigger\n        width=\"full\"\n        className={clsx(triggerClassName, {\n          [styles.segmentsSelectTriggerCSS]: cachedSegment?.segment?.variables,\n        })}\n        placeholder={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.segmentsTriggerPlaceholder,\n        )}\n      />\n      <Select.Filter />\n      <Select.Content showSelectedOptionsFirst width={overlayWidth}>\n        <Select.EmptyState>\n          {availableSegments.length === 0\n            ? intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.segmentsSelectEmptyState,\n              )\n            : intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.segmentsSelectEmptyStateSearch,\n              )}\n        </Select.EmptyState>\n\n        {/**\n         * The availableSegments removes the current selection to only show the other options.\n         * This would also clear the select value and therefore this one is additionally rendered.\n         */}\n        {((id && !isPlaceholder) || cachedSegment?.segment) && (\n          <Select.Option\n            value={id}\n            key={id}\n            textValue={getSafeSegmentName(cachedSegment?.segment, id)}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}\n            <Text>{getSafeSegmentName(cachedSegment?.segment, id)}</Text>\n          </Select.Option>\n        )}\n        {availableSegments.map((segmentOption) => (\n          <Select.Option\n            key={segmentOption.id}\n            value={segmentOption.id}\n            textValue={getSafeSegmentName(segmentOption, segmentOption.id)}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}\n            <Text>{getSafeSegmentName(segmentOption, segmentOption.id)}</Text>\n          </Select.Option>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n});\n"],
   "mappings": "AA0IM,cAUA,YAVA;AA1IN,OAAO,UAAU;AACjB,SAAS,YAAY,YAAY,WAAW,cAAc;AAC1D,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AACtB,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAczC,SAAS,mBACP,SACA,UACA;AACA,SAAO,SAAS,QAAQ,QAAQ,SAAS,KAAK,QAAQ,OAAO;AAC/D;AAMO,MAAM,gBAAgB,WAG3B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,EACtB,IAAI;AACJ,QAAM,OAAO,QAAQ;AAErB,QAAM,mBACJ,OAAkD,IAAI;AACxD,QAAM,YAAY,aAAa,CAAC,cAAc,gBAAgB,CAAC;AAC/D,QAAM,oBACJ,OAAkD,IAAI;AAExD,QAAM,EAAE,iBAAiB,gBAAgB,IAAI,qBAAqB;AAElE,QAAM,EAAE,WAAW,IAAI,iBAAiB;AAExC,QAAM,EAAE,WAAW,IAAI,WAAW,iBAAiB;AAEnD,QAAM,eAAe,iBAAiB,YAAY;AAElD,YAAU,MAAM;AACd,mBAAe,mBAAmB,iBAAiB,SAAS,SAAS;AAGrE,QAAI,WAAW,WAAW,KAAK,WAAW;AACxC,uBAAiB,SAAS,QAAQ;AAClC;AAAA,IACF;AAIA,QAAI,iBAAiB,CAAC,WAAW;AAC/B,uBAAiB,SAAS,KAAK;AAAA,IACjC;AAAA,EAKF,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,OAAO;AAAA,MAClB,OAAO;AAAA,MACP;AAAA,MACA,UAAU,CAAC;AAAA,MACX,WAAW;AAAA,MACX,UAAU,YAAY,eAAe;AAAA,MACrC,oBAAkB;AAAA,MAClB,cAAc,CAAC,WAAW;AACxB,YAAI,QAAQ;AACV;AAAA,QACF;AAEA,0BAAkB,SAAS,KAAK;AAAA,MAClC;AAAA,MACA,UAAU,CAAC,eAAe;AACxB,YAAI,YAAY;AACd,qBAAW,UAAU,EAClB,KAAK,CAAC,eAAe;AACpB;AAAA,cACE,EAAE,GAAG;AAAA,cACL;AAAA,gBACE,GAAG,WAAW;AAAA,gBACd,WAAW,CAAC,WAAW,QAAQ,YAAY,SAAY,CAAC;AAAA,cAC1D;AAAA,YACF;AAAA,UACF,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,gBAAI,MAAM,GAAG;AAEX,sBAAQ;AAAA,gBACN,iDAAiD,EAAE;AAAA,gBACnD;AAAA,cACF;AAAA,YACF;AACA,4BAAgB,EAAE;AAAA,UACpB,CAAC;AAAA,QACL;AAAA,MACF;AAAA,MACA,gBAAa;AAAA,MAEb;AAAA;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACC,OAAM;AAAA,YACN,WAAW,KAAK,kBAAkB;AAAA,cAChC,CAAC,OAAO,wBAAwB,GAAG,eAAe,SAAS;AAAA,YAC7D,CAAC;AAAA,YACD,aAAa,KAAK;AAAA,cAChB,yBAAyB;AAAA,YAC3B;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,OAAO,QAAP,EAAc;AAAA,QACf,qBAAC,OAAO,SAAP,EAAe,0BAAwB,MAAC,OAAO,cAC9C;AAAA,8BAAC,OAAO,YAAP,EACE,4BAAkB,WAAW,IAC1B,KAAK;AAAA,YACH,yBAAyB;AAAA,UAC3B,IACA,KAAK;AAAA,YACH,yBAAyB;AAAA,UAC3B,GACN;AAAA,WAMG,MAAM,CAAC,iBAAkB,eAAe,YACzC;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACC,OAAO;AAAA,cAEP,WAAW,mBAAmB,eAAe,SAAS,EAAE;AAAA,cAGxD,8BAAC,QAAM,6BAAmB,eAAe,SAAS,EAAE,GAAE;AAAA;AAAA,YAJjD;AAAA,UAKP;AAAA,UAED,kBAAkB,IAAI,CAAC,kBACtB;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cAEC,OAAO,cAAc;AAAA,cACrB,WAAW,mBAAmB,eAAe,cAAc,EAAE;AAAA,cAG7D,8BAAC,QAAM,6BAAmB,eAAe,cAAc,EAAE,GAAE;AAAA;AAAA,YALtD,cAAc;AAAA,UAMrB,CACD;AAAA,WACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": []
 }

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-12-2";
-var noBorderRadiusRight = "_1fuxi5m2-3-12-2";
-var segmentsSelectCSS = "_1fuxi5m0-3-12-2";
-var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m6-3-12-2", variantClassNames: { layout: { full: "_1fuxi5m7-3-12-2", "full-readonly": "_1fuxi5m8-3-12-2", "no-variables": "_1fuxi5m9-3-12-2", "no-variables-readonly": "_1fuxi5ma-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var segmentsSelectTriggerCSS = "_1fuxi5m1-3-12-2";
-var variablesSelectCSS = "_1fuxi5m3-3-12-2";
-var variablesSelectTriggerCSS = "_1fuxi5m4-3-12-2";
+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";
 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-12-2';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-12-2';\nexport var segmentsSelectCSS = '_1fuxi5m0-3-12-2';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m6-3-12-2',variantClassNames:{layout:{full:'_1fuxi5m7-3-12-2','full-readonly':'_1fuxi5m8-3-12-2','no-variables':'_1fuxi5m9-3-12-2','no-variables-readonly':'_1fuxi5ma-3-12-2'}},defaultVariants:{},compoundVariants:[]});\nexport var segmentsSelectTriggerCSS = '_1fuxi5m1-3-12-2';\nexport var variablesSelectCSS = '_1fuxi5m3-3-12-2';\nexport var variablesSelectTriggerCSS = '_1fuxi5m4-3-12-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-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';"],
   "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,3 @@
-._1e5el1o0-3-12-2 {
+._1e5el1o0-3-13-2 {
   max-width: 400px;
 }

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

@@ -1,5 +1,5 @@
 import "./SegmentSelectorTrigger.css";
-var trigger = "_1e5el1o0-3-12-2";
+var trigger = "_1e5el1o0-3-13-2";
 export {
   trigger
 };

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-12-2';"],
+  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-13-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

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

@@ -58,7 +58,7 @@ const ValueSelect = (props) => {
   const { data: faasResult, isLoading: isFaasLoading } = useQuery(
     // excluded segment.segment.version: keying on it would refetch on every segment edit,
     // not just ones that change the query; overlay-reopen invalidation covers the rest.
-    // eslint-disable-next-line @tanstack/query/exhaustive-deps
+    // oxlint-disable-next-line @tanstack/query/exhaustive-deps
     {
       queryKey: ["getSegmentVariables", segment.segment.id, query],
       queryFn: () => getSegmentVariables(segment.segment.id, segment.segment.version)

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    // eslint-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    // eslint-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    // eslint-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    // eslint-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    // eslint-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    // eslint-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"],
+  "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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",
   "names": []
 }

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

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

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

@@ -77,7 +77,7 @@ function useSyncPropsAndState(store, memoedValue, isControlled, precision, forma
       });
     },
     // timeframeSelectorRef and debouncedOnChangeRef are stable refs — no need to include in deps
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
     [
       formFieldMessagesDispatch,
       formatString,
@@ -115,9 +115,9 @@ const _TimeframeSelector = forwardRef(
     readOnly: propReadOnly,
     id: propId,
     "aria-disabled": propAriaDisabled,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
     controlState,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
     precision = "minutes",
     ...remainingProps
   }, forwardedRef) => {
@@ -130,7 +130,7 @@ const _TimeframeSelector = forwardRef(
     const memoedDefaultValue = useMemo(
       () => mapToPartialTimeframe(propDefaultValue, precision),
       /** We're ignoring updates to defaultValue as it only considers the initial state. */
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      // oxlint-disable-next-line react-hooks/exhaustive-deps
       []
     );
     const { min, max } = useMinMax(propMin, propMax);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/timeframe-selector/TimeframeSelector.tsx"],
-  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { PresetItem } from './components/presets/PresetItem.js';\nimport { Presets } from './components/presets/Presets.js';\nimport { CustomTrigger } from './components/trigger/CustomTrigger.js';\nimport { DisplayValue } from './components/trigger/DisplayValue.js';\nimport { Trigger } from './components/trigger/Trigger.js';\nimport { TIMEFRAMESELECTOR_ERROR_MESSAGES } from './constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from './TimeframeSelector.types.js';\nimport { TimeframeSelectorRoot } from './TimeframeSelectorRoot.js';\nimport { saveRecentTimeframe } from './utils/presets-helpers.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getTimeframeSelectorActions } from '../../core/time/timeframeStore/actions/timeframeSelector.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  TimeframeSelectorState,\n  TimeframeSelectorStoreActions,\n} from '../../core/time/timeframeStore/timeframeSelector.types.js';\nimport { TimeframeSelectorStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport { type Timeframe, type TimeValue } from '../../core/types/time.js';\nimport { getTimeOffsetFromInitialValue } from '../../forms/calendar/utils/helpers.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerRef,\n} from '../../forms/date-time-range-picker/types.js';\nimport { useFormControl } from '../../forms/forms-core/hooks/useFormControl.js';\nimport type { FormFieldMessagesReducerAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../../forms/forms-core/time/date-time.js';\nimport {\n  removePrecisionFromTimeFrame,\n  mapToPartialTimeframe,\n} from '../../forms/forms-core/time/timeParser.js';\nimport type {\n  FormControlRef,\n  TimeRangePickerRef,\n} from '../../forms/shared-types.js';\n\nconst STEPPER_DEBOUNCE_MS = 300;\n\ntype TimeframeSelectorStore = StoreApi<\n  TimeframeSelectorState & TimeframeSelectorStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: TimeframeSelectorStore,\n  memoedValue:\n    | { from: TimeValue | null; to: TimeValue | null }\n    | null\n    | undefined,\n  isControlled: boolean,\n  precision: Exclude<Precision, 'day'>,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  timeframeSelectorRef: RefObject<TimeRangePickerRef | null>,\n  debouncedOnChangeRef: RefObject<ReturnType<typeof debounce>>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(\n    () => {\n      isControlled &&\n        store.setState((state) => {\n          debouncedOnChangeRef?.current?.cancel();\n          const error = validate(memoedValue ?? null, state.min, state.max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            showError: false,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: formatString,\n            valueMode: 'timeframeSelector',\n            required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n            formerError: state.timeframeSelectorError,\n          });\n\n          const value = removePrecisionFromTimeFrame(\n            memoedValue,\n            state.precision,\n          );\n          const timeOffset = getTimeOffsetFromInitialValue(\n            value,\n            'range',\n            state.min,\n            state.max,\n            precision,\n          );\n\n          return {\n            ...state,\n            timeframeSelectorTimeframe: value,\n            calendarValue: value,\n            dateTimeRangePickerTimeframe: value,\n            referenceTimeframe: null,\n            timeframeSelectorError: error,\n            calendarError: error,\n            dateTimeRangePickerError: error,\n            timeOffset,\n            required,\n          };\n        });\n    },\n    // timeframeSelectorRef and debouncedOnChangeRef are stable refs \u2014 no need to include in deps\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      formFieldMessagesDispatch,\n      formatString,\n      isControlled,\n      memoedValue,\n      precision,\n      required,\n      store,\n    ],\n  );\n\n  // Sync precision and formatString into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const preciseValue = isControlled\n        ? memoedValue\n        : state.timeframeSelectorTimeframe;\n      const value = removePrecisionFromTimeFrame(preciseValue, precision);\n\n      return {\n        ...state,\n        precision,\n        formatString,\n        timeframeSelectorTimeframe: value,\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n      };\n    });\n  }, [precision, formatString, store, isControlled, memoedValue]);\n}\n\nconst _TimeframeSelector = forwardRef<\n  TimeRangePickerRef,\n  TimeframeSelectorProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n      controlState,\n      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n      precision = 'minutes',\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n\n    const memoedValue = useMemo(\n      () => mapToPartialTimeframe(propValue, precision),\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => mapToPartialTimeframe(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n    const dateTimeRangePickerRef = useRef<DateTimeRangePickerRef>(null);\n    const timeframeSelectorRef = useRef<TimeRangePickerRef>(null);\n\n    const { formatString } = useDateTimeMessages({ precision });\n    const formControl = useFormControl({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled,\n      propReadOnly,\n      controlState,\n    });\n    const { required, messageDispatch: formFieldMessagesDispatch } =\n      formControl;\n\n    const debouncedOnChangeRef = useRef(\n      debounce((timeframe: Timeframe | null) => {\n        onChangeProp?.(timeframe);\n        if (timeframe) {\n          saveRecentTimeframe(timeframe);\n        }\n      }, STEPPER_DEBOUNCE_MS),\n    );\n\n    // Cancel the debounced call on unmount.\n    useEffect(() => {\n      const debouncedOnChange = debouncedOnChangeRef.current;\n      return () => debouncedOnChange.cancel();\n    }, []);\n\n    const [initialState] = useState<TimeframeSelectorState>(() => {\n      const value = isControlled ? memoedValue : memoedDefaultValue;\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: timeframeSelectorRef,\n        expectedFormat: formatString,\n        valueMode: 'timeframeSelector',\n        required,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'range',\n        min,\n        max,\n        precision,\n      );\n\n      return {\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n        timeframeSelectorTimeframe: value,\n        referenceTimeframe: null,\n        min,\n        max,\n        precision,\n        isFullDay: false,\n        calendarRef,\n        dateTimeFromRef,\n        dateTimeRangePickerRef,\n        timeframeSelectorRef,\n        required,\n        timeframeSelectorError: error,\n        calendarError: error,\n        dateTimeRangePickerError: error,\n        previousTimeframe: null,\n        timeOffset,\n        formatString,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        TimeframeSelectorState,\n        TimeframeSelectorStoreActions\n      >(\n        initialState,\n        getTimeframeSelectorActions(\n          isControlled,\n          timeframeSelectorRef,\n          formFieldMessagesDispatch,\n          onChangeProp,\n          debouncedOnChangeRef,\n          TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      timeframeSelectorRef,\n      debouncedOnChangeRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: TimeframeSelectorState,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.timeframeSelectorTimeframe, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.timeframeSelectorError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: state.formatString,\n            valueMode: 'timeframeSelector',\n            required: state.required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n          });\n          return {\n            timeframeSelectorError: error,\n            calendarError: error,\n            dateTimeRangePickerError: error,\n          };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs<TimeRangePickerRef>([\n      timeframeSelectorRef,\n      forwardedRef,\n    ]);\n\n    return (\n      <TimeframeSelectorStoreProvider store={store}>\n        <TimeframeSelectorRoot\n          {...remainingProps}\n          formControl={formControl}\n          ref={mergedRef}\n        />\n      </TimeframeSelectorStoreProvider>\n    );\n  },\n);\n\n(\n  _TimeframeSelector as typeof _TimeframeSelector & { displayName: string }\n).displayName = 'TimeframeSelector';\n\n/**\n * Use the `TimeframeSelector` to let users filter data by time, choosing from preset timeframes or entering a custom start and end time.\n * @public\n */\nexport const TimeframeSelector = Object.assign(_TimeframeSelector, {\n  Trigger,\n  DisplayValue,\n  CustomTrigger,\n  Presets,\n  PresetItem,\n});\n"],
+  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { PresetItem } from './components/presets/PresetItem.js';\nimport { Presets } from './components/presets/Presets.js';\nimport { CustomTrigger } from './components/trigger/CustomTrigger.js';\nimport { DisplayValue } from './components/trigger/DisplayValue.js';\nimport { Trigger } from './components/trigger/Trigger.js';\nimport { TIMEFRAMESELECTOR_ERROR_MESSAGES } from './constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from './TimeframeSelector.types.js';\nimport { TimeframeSelectorRoot } from './TimeframeSelectorRoot.js';\nimport { saveRecentTimeframe } from './utils/presets-helpers.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getTimeframeSelectorActions } from '../../core/time/timeframeStore/actions/timeframeSelector.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  TimeframeSelectorState,\n  TimeframeSelectorStoreActions,\n} from '../../core/time/timeframeStore/timeframeSelector.types.js';\nimport { TimeframeSelectorStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport { type Timeframe, type TimeValue } from '../../core/types/time.js';\nimport { getTimeOffsetFromInitialValue } from '../../forms/calendar/utils/helpers.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerRef,\n} from '../../forms/date-time-range-picker/types.js';\nimport { useFormControl } from '../../forms/forms-core/hooks/useFormControl.js';\nimport type { FormFieldMessagesReducerAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../../forms/forms-core/time/date-time.js';\nimport {\n  removePrecisionFromTimeFrame,\n  mapToPartialTimeframe,\n} from '../../forms/forms-core/time/timeParser.js';\nimport type {\n  FormControlRef,\n  TimeRangePickerRef,\n} from '../../forms/shared-types.js';\n\nconst STEPPER_DEBOUNCE_MS = 300;\n\ntype TimeframeSelectorStore = StoreApi<\n  TimeframeSelectorState & TimeframeSelectorStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: TimeframeSelectorStore,\n  memoedValue:\n    | { from: TimeValue | null; to: TimeValue | null }\n    | null\n    | undefined,\n  isControlled: boolean,\n  precision: Exclude<Precision, 'day'>,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  timeframeSelectorRef: RefObject<TimeRangePickerRef | null>,\n  debouncedOnChangeRef: RefObject<ReturnType<typeof debounce>>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(\n    () => {\n      isControlled &&\n        store.setState((state) => {\n          debouncedOnChangeRef?.current?.cancel();\n          const error = validate(memoedValue ?? null, state.min, state.max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            showError: false,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: formatString,\n            valueMode: 'timeframeSelector',\n            required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n            formerError: state.timeframeSelectorError,\n          });\n\n          const value = removePrecisionFromTimeFrame(\n            memoedValue,\n            state.precision,\n          );\n          const timeOffset = getTimeOffsetFromInitialValue(\n            value,\n            'range',\n            state.min,\n            state.max,\n            precision,\n          );\n\n          return {\n            ...state,\n            timeframeSelectorTimeframe: value,\n            calendarValue: value,\n            dateTimeRangePickerTimeframe: value,\n            referenceTimeframe: null,\n            timeframeSelectorError: error,\n            calendarError: error,\n            dateTimeRangePickerError: error,\n            timeOffset,\n            required,\n          };\n        });\n    },\n    // timeframeSelectorRef and debouncedOnChangeRef are stable refs \u2014 no need to include in deps\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n    [\n      formFieldMessagesDispatch,\n      formatString,\n      isControlled,\n      memoedValue,\n      precision,\n      required,\n      store,\n    ],\n  );\n\n  // Sync precision and formatString into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const preciseValue = isControlled\n        ? memoedValue\n        : state.timeframeSelectorTimeframe;\n      const value = removePrecisionFromTimeFrame(preciseValue, precision);\n\n      return {\n        ...state,\n        precision,\n        formatString,\n        timeframeSelectorTimeframe: value,\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n      };\n    });\n  }, [precision, formatString, store, isControlled, memoedValue]);\n}\n\nconst _TimeframeSelector = forwardRef<\n  TimeRangePickerRef,\n  TimeframeSelectorProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      controlState,\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      precision = 'minutes',\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n\n    const memoedValue = useMemo(\n      () => mapToPartialTimeframe(propValue, precision),\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => mapToPartialTimeframe(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // oxlint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n    const dateTimeRangePickerRef = useRef<DateTimeRangePickerRef>(null);\n    const timeframeSelectorRef = useRef<TimeRangePickerRef>(null);\n\n    const { formatString } = useDateTimeMessages({ precision });\n    const formControl = useFormControl({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled,\n      propReadOnly,\n      controlState,\n    });\n    const { required, messageDispatch: formFieldMessagesDispatch } =\n      formControl;\n\n    const debouncedOnChangeRef = useRef(\n      debounce((timeframe: Timeframe | null) => {\n        onChangeProp?.(timeframe);\n        if (timeframe) {\n          saveRecentTimeframe(timeframe);\n        }\n      }, STEPPER_DEBOUNCE_MS),\n    );\n\n    // Cancel the debounced call on unmount.\n    useEffect(() => {\n      const debouncedOnChange = debouncedOnChangeRef.current;\n      return () => debouncedOnChange.cancel();\n    }, []);\n\n    const [initialState] = useState<TimeframeSelectorState>(() => {\n      const value = isControlled ? memoedValue : memoedDefaultValue;\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: timeframeSelectorRef,\n        expectedFormat: formatString,\n        valueMode: 'timeframeSelector',\n        required,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'range',\n        min,\n        max,\n        precision,\n      );\n\n      return {\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n        timeframeSelectorTimeframe: value,\n        referenceTimeframe: null,\n        min,\n        max,\n        precision,\n        isFullDay: false,\n        calendarRef,\n        dateTimeFromRef,\n        dateTimeRangePickerRef,\n        timeframeSelectorRef,\n        required,\n        timeframeSelectorError: error,\n        calendarError: error,\n        dateTimeRangePickerError: error,\n        previousTimeframe: null,\n        timeOffset,\n        formatString,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        TimeframeSelectorState,\n        TimeframeSelectorStoreActions\n      >(\n        initialState,\n        getTimeframeSelectorActions(\n          isControlled,\n          timeframeSelectorRef,\n          formFieldMessagesDispatch,\n          onChangeProp,\n          debouncedOnChangeRef,\n          TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      timeframeSelectorRef,\n      debouncedOnChangeRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: TimeframeSelectorState,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.timeframeSelectorTimeframe, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.timeframeSelectorError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: state.formatString,\n            valueMode: 'timeframeSelector',\n            required: state.required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n          });\n          return {\n            timeframeSelectorError: error,\n            calendarError: error,\n            dateTimeRangePickerError: error,\n          };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs<TimeRangePickerRef>([\n      timeframeSelectorRef,\n      forwardedRef,\n    ]);\n\n    return (\n      <TimeframeSelectorStoreProvider store={store}>\n        <TimeframeSelectorRoot\n          {...remainingProps}\n          formControl={formControl}\n          ref={mergedRef}\n        />\n      </TimeframeSelectorStoreProvider>\n    );\n  },\n);\n\n(\n  _TimeframeSelector as typeof _TimeframeSelector & { displayName: string }\n).displayName = 'TimeframeSelector';\n\n/**\n * Use the `TimeframeSelector` to let users filter data by time, choosing from preset timeframes or entering a custom start and end time.\n * @public\n */\nexport const TimeframeSelector = Object.assign(_TimeframeSelector, {\n  Trigger,\n  DisplayValue,\n  CustomTrigger,\n  Presets,\n  PresetItem,\n});\n"],
   "mappings": "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",
   "names": ["min", "max"]
 }

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

@@ -1,6 +1,6 @@
 import "./TimeframeSelector.css";
-var displayValueParts = "_1sqhmjg0-3-12-2";
-var root = "_1sqhmjg1-3-12-2";
+var displayValueParts = "_1sqhmjg0-3-13-2";
+var root = "_1sqhmjg1-3-13-2";
 export {
   displayValueParts,
   root

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/timeframe-selector/TimeframeSelector.css.ts"],
-  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-12-2';\nexport var root = '_1sqhmjg1-3-12-2';"],
+  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-13-2';\nexport var root = '_1sqhmjg1-3-13-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,OAAO;",
   "names": []
 }

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

@@ -103,7 +103,7 @@ const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
   const {
     value: propValue,
     defaultValue,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    // oxlint-disable-next-line typescript/no-deprecated
     clearable = false,
     children,
     onChange,