@dynatrace/strato-components 3.11.3 → 3.12.0

package/filters/filter-field/suggestions/SuggestionTips.js

@@ -35,12 +35,14 @@ var import_clsx = __toESM(require("clsx"));
 var import_framer_motion = require("framer-motion");
 var import_react_intl = require("react-intl");
 var styles = __toESM(require("./SuggestionTips.sty.js"));
+var import_useId = require("../../../core/hooks/useId.js");
 var import_Flex = require("../../../layouts/flex/Flex.js");
 var import_Surface = require("../../../layouts/surface/Surface.js");
 var import_textStyle_css = require("../../../styles/textStyle.sty.js");
 var import_ExternalLink = require("../../../typography/external-link/ExternalLink.js");
 var import_Text = require("../../../typography/text/Text.js");
 var import_TextEllipsis = require("../../../typography/text-ellipsis/TextEllipsis.js");
+var import_useFilterFieldContext = require("../hooks/useFilterFieldContext.js");
 var import_useOverlayTransition = __toESM(require("../hooks/useOverlayTransition.js"));
 var import_messages = require("../messages.js");
 const suggestionTipsVariants = {
@@ -60,6 +62,8 @@ const suggestionTipsVariants = {
 const SuggestionTips = () => {
   const intl = (0, import_react_intl.useIntl)();
   const transition = (0, import_useOverlayTransition.default)(true);
+  const { focusedListItem } = (0, import_useFilterFieldContext.useFilterFieldContext)();
+  const docsLinkId = (0, import_useId.useId)();
   const tips = [
     {
       shortcut: "\u23CE",
@@ -99,6 +103,7 @@ const SuggestionTips = () => {
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_Flex.Flex,
               {
+                "aria-hidden": "true",
                 className: styles.suggestionTipsContent,
                 style: { overflow: "hidden" },
                 columnGap: 16,
@@ -114,7 +119,7 @@ const SuggestionTips = () => {
                       {
                         className: (0, import_clsx.default)(
                           (0, import_textStyle_css.textStyle)({ textStyle: "small" }),
-                          styles.suggstionTipsEllipsis
+                          styles.suggestionTipsEllipsis
                         ),
                         children: tip.text
                       }
@@ -129,8 +134,14 @@ const SuggestionTips = () => {
                 href: "https://docs.dynatrace.com/docs/get-started/dynatrace-ui/ui-filter-field",
                 className: (0, import_clsx.default)(
                   (0, import_textStyle_css.textStyle)({ textStyle: "small" }),
-                  styles.docsLink
+                  styles.docsLink,
+                  docsLinkId === focusedListItem?.id && styles.docsLinkVirtualFocus
                 ),
+                id: docsLinkId,
+                role: "option",
+                "aria-selected": docsLinkId === focusedListItem?.id,
+                "data-strato-filter-field-virtual-focus-id": docsLinkId,
+                "data-strato-filter-field-virtual-focus-type": "button",
                 "data-dt-name": "FilterSyntax",
                 children: intl.formatMessage(import_messages.filterFieldMessages.docsLink)
               }

package/filters/filter-field/suggestions/SuggestionTips.sty.js

@@ -18,16 +18,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var SuggestionTips_css_exports = {};
 __export(SuggestionTips_css_exports, {
   docsLink: () => docsLink,
+  docsLinkVirtualFocus: () => docsLinkVirtualFocus,
   suggestionTips: () => suggestionTips,
   suggestionTipsContent: () => suggestionTipsContent,
-  suggestionTipsWrapper: () => suggestionTipsWrapper,
-  suggstionTipsEllipsis: () => suggstionTipsEllipsis
+  suggestionTipsEllipsis: () => suggestionTipsEllipsis,
+  suggestionTipsWrapper: () => suggestionTipsWrapper
 });
 module.exports = __toCommonJS(SuggestionTips_css_exports);
 var import_SuggestionsOverlay_css_ts_vanilla = require("./SuggestionsOverlay.css");
+var import_focusRingStatic_css_ts_vanilla = require("../../../core/styles/focusRingStatic.css");
 var import_SuggestionTips_css_ts_vanilla = require("./SuggestionTips.css");
-var docsLink = "_1dx7u84-3-11-3";
-var suggestionTips = "_1dx7u80-3-11-3";
-var suggestionTipsContent = "_1dx7u83-3-11-3";
-var suggestionTipsWrapper = "_1dx7u82-3-11-3";
-var suggstionTipsEllipsis = "_1dx7u81-3-11-3";
+var docsLink = "_1dx7u84-3-12-0";
+var docsLinkVirtualFocus = "_1dx7u85-3-12-0 _z0fq9b4-3-12-0 _z0fq9be-3-12-0 _z0fq9b5-3-12-0 _z0fq9b8-3-12-0";
+var suggestionTips = "_1dx7u80-3-12-0";
+var suggestionTipsContent = "_1dx7u83-3-12-0";
+var suggestionTipsEllipsis = "_1dx7u81-3-12-0";
+var suggestionTipsWrapper = "_1dx7u82-3-12-0";

package/filters/filter-field/suggestions/Suggestions.js

@@ -130,7 +130,6 @@ function SuggestionContent(props) {
     searchSuggestionValues,
     fallbackKeySuggestionValues,
     statementSuggestionValues,
-    filterFieldId,
     parserConfig,
     isValidSearch
   } = (0, import_useFilterFieldContext.useFilterFieldContext)();
@@ -157,7 +156,7 @@ function SuggestionContent(props) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: `suggestions-${filterFieldId}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
     childrenCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_CSSHighlight.CSSHighlight,
       {
@@ -280,7 +279,6 @@ const Suggestions = (props) => {
   } = props;
   const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
   const { autoSuggestions, defaultSuggestionsCount, triggerRef, editorView } = (0, import_useFilterFieldContext.useFilterFieldContext)();
-  const intl = (0, import_react_intl.useIntl)();
   const transition = (0, import_useOverlayTransition.default)(true);
   const parentRef = (0, import_react.useRef)(null);
   const childrenArray = (0, import_react.useMemo)(() => import_react.Children.toArray(children), [children]);
@@ -334,55 +332,44 @@ const Suggestions = (props) => {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AriaLiveInfo.AriaLiveInfo, { flattenedSuggestionItems }),
         groupMetadata.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VisuallyHidden.VisuallyHidden, { children: groupMetadata.map(({ groupId, label }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: toGroupLabelId(groupId), children: label }, groupId)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.suggestionsScrollContainerWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_framer_motion.motion.div,
           {
-            className: styles.suggestionsScrollContainerWrapper,
-            role: "listbox",
-            "aria-expanded": "true",
-            "aria-label": intl.formatMessage(
-              import_messages.filterFieldMessages.suggestions.a11y.ariaLabel
+            className: (0, import_clsx.default)(
+              styles.suggestionsScrollContainer,
+              "strato-filter-field-suggestions"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_framer_motion.motion.div,
+            ref: parentRef,
+            style: { maxHeight: positioningStyles.popper.maxHeight },
+            variants: suggestionsAnimationVariants,
+            initial: "inital",
+            animate: "default",
+            exit: "exit",
+            transition,
+            children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_Flex.Flex,
               {
-                className: (0, import_clsx.default)(
-                  styles.suggestionsScrollContainer,
-                  "strato-filter-field-suggestions"
-                ),
-                ref: parentRef,
-                style: { maxHeight: positioningStyles.popper.maxHeight },
-                variants: suggestionsAnimationVariants,
-                initial: "inital",
-                animate: "default",
-                exit: "exit",
-                transition,
-                children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                  import_Flex.Flex,
-                  {
-                    role: "presentation",
-                    justifyContent: "start",
-                    px: 8,
-                    py: 6,
-                    className: suggestionStyles.suggestionsLoading,
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ProgressCircle.ProgressCircle, { size: "small", "aria-label": "Loading suggestions" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.filterFieldMessages.suggestions.loading })
-                    ]
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  SuggestionContent,
-                  {
-                    optionVirtualizer,
-                    flattenedSuggestions: slicedSuggestions,
-                    isSliced,
-                    controlProps
-                  }
-                )
+                role: "presentation",
+                justifyContent: "start",
+                px: 8,
+                py: 6,
+                className: suggestionStyles.suggestionsLoading,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ProgressCircle.ProgressCircle, { size: "small", "aria-label": "Loading suggestions" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.filterFieldMessages.suggestions.loading })
+                ]
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              SuggestionContent,
+              {
+                optionVirtualizer,
+                flattenedSuggestions: slicedSuggestions,
+                isSliced,
+                controlProps
               }
             )
           }
-        )
+        ) })
       ]
     }
   );

package/filters/filter-field/suggestions/SuggestionsOverlay.css

@@ -1,23 +1,23 @@
-._ssu5rt1-3-11-3 {
+._ssu5rt1-3-12-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
   container-type: inline-size;
-  container-name: _ssu5rt0-3-11-3;
+  container-name: _ssu5rt0-3-12-0;
   transform-origin: top;
 }
-._ssu5rt2-3-11-3 {
+._ssu5rt2-3-12-0 {
   box-sizing: border-box;
   padding: 0;
 }
-._ssu5rt2-3-11-3._ssu5rt2-3-11-3 {
-  --_1igzksy0-3-11-3: var(--dt-borders-radius-surface-subdued, 9px);
+._ssu5rt2-3-12-0._ssu5rt2-3-12-0 {
+  --_1igzksy0-3-12-0: var(--dt-borders-radius-surface-subdued, 9px);
 }
-._ssu5rt3-3-11-3 {
+._ssu5rt3-3-12-0 {
   overflow: hidden;
   height: 100%;
 }
-._ssu5rt4-3-11-3 {
+._ssu5rt4-3-12-0 {
   padding: var(--dt-spacings-size-4, 4px);
   height: 100%;
   max-height: 101vh;

package/filters/filter-field/suggestions/SuggestionsOverlay.js

@@ -33,12 +33,15 @@ module.exports = __toCommonJS(SuggestionsOverlay_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_framer_motion = require("framer-motion");
 var import_react = require("react");
+var import_react_intl = require("react-intl");
 var styles = __toESM(require("./SuggestionsOverlay.sty.js"));
 var import_SuggestionTips = require("./SuggestionTips.js");
 var import_OverlayContainer = require("../../../core/components/OverlayContainer.js");
 var import_useOverlayStacking = require("../../../core/hooks/useOverlayStacking.js");
 var import_OverlayStackingProvider = require("../../../core/providers/OverlayStackingProvider.js");
+var import_useFilterFieldContext = require("../hooks/useFilterFieldContext.js");
 var import_useOverlayTransition = __toESM(require("../hooks/useOverlayTransition.js"));
+var import_messages = require("../messages.js");
 const suggestionsOverlayAnimationVariants = {
   inital: {
     opacity: 0.4,
@@ -63,6 +66,8 @@ const SuggestionsOverlay = (0, import_react.forwardRef)((props, forwardedRef) =>
   } = props;
   const overlayContainerProps = (0, import_useOverlayStacking.useOverlayStacking)(void 0, "dropdown");
   const transition = (0, import_useOverlayTransition.default)(false);
+  const { filterFieldId } = (0, import_useFilterFieldContext.useFilterFieldContext)();
+  const intl = (0, import_react_intl.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_OverlayContainer.OverlayContainer,
     {
@@ -74,6 +79,12 @@ const SuggestionsOverlay = (0, import_react.forwardRef)((props, forwardedRef) =>
         "div",
         {
           ref: forwardedRef,
+          id: `suggestions-${filterFieldId}`,
+          role: "listbox",
+          "aria-expanded": "true",
+          "aria-label": intl.formatMessage(
+            import_messages.filterFieldMessages.suggestions.a11y.ariaLabel
+          ),
           "data-testid": dataTestId,
           onPointerDown: (event) => {
             event.preventDefault();

package/filters/filter-field/suggestions/SuggestionsOverlay.sty.js

@@ -25,8 +25,8 @@ __export(SuggestionsOverlay_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionsOverlay_css_exports);
 var import_SuggestionsOverlay_css_ts_vanilla = require("./SuggestionsOverlay.css");
-var suggestionsOverlay = "_ssu5rt2-3-11-3";
-var suggestionsOverlayWrapper = "_ssu5rt1-3-11-3";
-var suggestionsOverlayWrapperContainer = "_ssu5rt0-3-11-3";
-var suggestionsScrollContainer = "_ssu5rt4-3-11-3";
-var suggestionsScrollContainerWrapper = "_ssu5rt3-3-11-3";
+var suggestionsOverlay = "_ssu5rt2-3-12-0";
+var suggestionsOverlayWrapper = "_ssu5rt1-3-12-0";
+var suggestionsOverlayWrapperContainer = "_ssu5rt0-3-12-0";
+var suggestionsScrollContainer = "_ssu5rt4-3-12-0";
+var suggestionsScrollContainerWrapper = "_ssu5rt3-3-12-0";

package/filters/filter-field/utils/get-suggestion-transaction.js

@@ -27,6 +27,7 @@ var import_state = require("@codemirror/state");
 var import_escape_suggestion = require("./escape-suggestion.js");
 var import_get_statement_status = require("./get-statement-status.js");
 var import_get_text = require("./get-text.js");
+var import_get_suggestions = require("./suggestions-utils/get-suggestions.js");
 var import_tree_navigation = require("./tree-navigation.js");
 var import_tree_node_guards = require("./tree-node-guards.js");
 var import_filterfield_language = require("../parser/filterfield-language.js");
@@ -199,6 +200,9 @@ function getSuggestionTransaction(suggestionValue, range, shouldEscapeSuggestion
         }
       } else if (range) {
         ({ from: replaceFrom, to: replaceUntil } = range);
+        if (replaceFrom === replaceUntil && token.range.from === replaceFrom && range[import_get_suggestions.overlappingSuggestionRangeBrand] === true) {
+          replaceUntil = token.range.to;
+        }
       }
       insertionRange = {
         from: Math.min(currentDocumentLength, replaceFrom),

package/filters/filter-field/utils/suggestions-utils/get-suggestions.d.ts

@@ -6,6 +6,14 @@ import type { FilterFieldGroupedSuggestions, FilterFieldSuggestionsCallback } fr
 import type { FilterFieldLezerNodeType, FilterFieldStatementNode, FilterFieldStatementTokenType, FilterFieldValueNode } from '../../types/tree-nodes.js';
 import type { FilterFieldCustomTypes } from '../../types/validation.js';
 import type { InternalValidatorMap } from '../validation-utils/normalize-validator-map.js';
+/**
+ * @internal
+ * Brand for ranges produced by the overlapping-suggestions path.
+ * Not exported from the package entry point — consumers cannot set this, so its
+ * presence in getSuggestionTransaction unambiguously identifies a stale internal
+ * range rather than an intentionally supplied consumer range.
+ */
+export declare const overlappingSuggestionRangeBrand: unique symbol;
 /** @internal */
 export declare function getSuggestions({ suggestionTypes, overlappingSuggestions, currentStatement, currentToken, currentTokenType, prevNode, internalValidatorMap, customTypes, parserConfig, showLogicalOperators, showInclusionOperators, doc, suggestionTypeForToken, }: {
     suggestionTypes: NonNullable<Parameters<FilterFieldSuggestionsCallback>[0]>['suggestionTypes'];

package/filters/filter-field/utils/suggestions-utils/get-suggestions.js

@@ -18,7 +18,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var get_suggestions_exports = {};
 __export(get_suggestions_exports, {
   filterSuggestions: () => filterSuggestions,
-  getSuggestions: () => getSuggestions
+  getSuggestions: () => getSuggestions,
+  overlappingSuggestionRangeBrand: () => overlappingSuggestionRangeBrand
 });
 module.exports = __toCommonJS(get_suggestions_exports);
 var import_key_suggestions = require("./key-suggestions.js");
@@ -54,6 +55,9 @@ function getTypedOperatorFromCurrentStatement(currentStatement) {
   const needle = currentStatement?.comparisonOperator ? currentStatement.comparisonOperator.textValue : "";
   return comparisonOperatorAlias[needle] ?? needle;
 }
+const overlappingSuggestionRangeBrand = /* @__PURE__ */ Symbol(
+  "overlappingSuggestionRange"
+);
 function getSuggestions({
   suggestionTypes,
   overlappingSuggestions,
@@ -142,10 +146,14 @@ function getSuggestions({
       { includeDetails: false }
     );
     if (overlappingSuggestions) {
+      const brandedRange = {
+        ...overlappingSuggestions.subToken.range
+      };
+      brandedRange[overlappingSuggestionRangeBrand] = true;
       comparisonOperatorSuggestions = comparisonOperatorSuggestions.map(
         (suggestion) => ({
           ...suggestion,
-          insertionRange: overlappingSuggestions.subToken.range,
+          insertionRange: brandedRange,
           escapeSuggestion: false
         })
       );

package/filters/segment-selector/SegmentSelector.css

@@ -1,22 +1,22 @@
-._11m6jkl0-3-11-3 {
+._11m6jkl0-3-12-0 {
   all: unset;
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-8, 8px);
 }
-._11m6jkl1-3-11-3 {
+._11m6jkl1-3-12-0 {
   all: unset;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._11m6jkl2-3-11-3 {
+._11m6jkl2-3-12-0 {
   max-height: 100px;
   overflow-y: auto;
   overflow-x: hidden;
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._11m6jkl3-3-11-3 > div {
+._11m6jkl3-3-12-0 > div {
   padding-right: var(--dt-spacings-size-0, 0);
 }

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

@@ -4,7 +4,7 @@ import type { FormControlWithOverlayRef } from '../../forms/shared-types.js';
  * Use the `SegmentSelector` as a top-level filter to narrow data by segment, setting the scope for any additional filters applied alongside it.
  * @public
  */
-export declare const SegmentSelector: ((props: import("../../index.js").DOMProps & import("../../index.js").WithChildren & import("../../index.js").StylingProps & import("../../index.js").DataTestId & import("../../index.js").MaskingProps & import("../../index.js").BehaviorTrackingProps & Omit<import("../../index.js").FormControlBaseProps<(...args: any[]) => void, HTMLElement>, "controlState" | "onBlur" | "onChange" | "onFocus"> & {
+export declare const SegmentSelector: ((props: import("../../index.js").DOMProps & import("../../index.js").WithChildren & import("../../index.js").StylingProps & import("../../index.js").DataTestId & import("../../index.js").MaskingProps & import("../../index.js").BehaviorTrackingProps & Omit<import("../../index.js").FormControlBaseProps<(...args: any[]) => void, HTMLButtonElement>, "controlState" | "onChange"> & {
     _form?: string;
     _messageTarget?: import("../../index.js")._MessageTarget | import("../../index.js")._MessageTarget[];
     variant?: "default" | "compact";

package/filters/segment-selector/SegmentSelector.js

@@ -62,6 +62,7 @@ var import_logging = require("../../core/utils/logging.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 var import_FormFieldMessageContextProvider = require("../../forms/forms-core/components/form-field/FormFieldMessageContextProvider.js");
 var import_useFormFieldValidation = require("../../forms/forms-core/hooks/useFormFieldValidation.js");
+var import_useContainerFocus = require("../../forms/hooks/useContainerFocus.js");
 var import_useCustomMessageEmitter = require("../../forms/validation/useCustomMessageEmitter.js");
 var import_useValidationStateEmitter = require("../../forms/validation/useValidationStateEmitter.js");
 var import_validation_builders = require("../../forms/validation/validation-builders.js");
@@ -95,6 +96,8 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
     variant = "default",
     onOpenChange,
     onValidityChange,
+    onFocus,
+    onBlur,
     readOnly: propReadOnly,
     disabled: propDisabled,
     required: propRequired,
@@ -139,6 +142,7 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
     id
   );
   const errorId = (0, import_useId.useId)();
+  const overlayOwnerId = (0, import_useId.useId)();
   const { segments } = (0, import_useSegments.useSegments)();
   const stringifiedValue = JSON.stringify(segments);
   const getSegmentValidationState = (0, import_react.useCallback)(
@@ -285,6 +289,18 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
     disabled
   });
   const { trapFocus, ...overlayProps } = _overlayProps;
+  const { onFocus: handleFocus, onBlur: handleBlur } = (0, import_useContainerFocus.useContainerFocus)({
+    onFocus,
+    onBlur: (e) => {
+      if (!formFieldMessagesState.isTouched) {
+        inputRef.current?.checkValidity();
+        void getSegmentValidationState("blur").then(emitValidationState);
+      }
+      onBlur?.(e);
+    },
+    disabled,
+    overlayOwnerId
+  });
   const { onOpenTooltip, isOpen, textEllipsisRef } = (0, import_useTooltipHandler.useTooltipHandler)(
     !customTrigger && variant === "default"
   );
@@ -320,24 +336,6 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
     ]
   );
   const buttonRef = (0, import_useMergeRefs.useMergeRefs)([triggerRef, targetRef, internalButtonRef]);
-  const handleOnBlur = (0, import_react.useCallback)(() => {
-    if (!overlayState.isOpen) {
-      formFieldMessagesDispatch?.({
-        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-        payload: { isTouched: true }
-      });
-      if (!formFieldMessagesState.isTouched) {
-        inputRef.current?.checkValidity();
-        void getSegmentValidationState("blur").then(emitValidationState);
-      }
-    }
-  }, [
-    overlayState.isOpen,
-    formFieldMessagesDispatch,
-    formFieldMessagesState.isTouched,
-    getSegmentValidationState,
-    emitValidationState
-  ]);
   (0, import_react.useEffect)(() => {
     (0, import_segmentValidationHelper.validateSegments)(
       segments,
@@ -364,7 +362,8 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
       triggerProps: {
         ...overlayTriggerProps,
         "data-dt-component": COMPONENT_NAME,
-        onBlur: handleOnBlur
+        onFocus: handleFocus,
+        onBlur: handleBlur
       },
       buttonRef,
       showError,
@@ -374,10 +373,11 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
       isLoading,
       text,
       overlayTriggerProps,
+      handleFocus,
+      handleBlur,
       buttonRef,
       showError,
-      ariaProps,
-      handleOnBlur
+      ariaProps
     ]
   );
   const stratoLogger = (0, import_react.useMemo)(() => {
@@ -429,6 +429,7 @@ const SegmentSelectorFwd = (0, import_react.forwardRef)((props, forwardedRef) =>
       {
         "data-testid": dataTestId,
         ...overlayContainerProps,
+        "data-dt-owner": overlayOwnerId,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FocusScope.FocusScope, { autoFocus: true, contain: trapFocus, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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

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

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

@@ -12,7 +12,7 @@ import type { ValidationState } from '../../forms/validation/types.js';
  * Accepted properties for SegmentSelector
  * @public
  */
-export type SegmentSelectorProps = DOMProps & WithChildren & StylingProps & DataTestId & MaskingProps & BehaviorTrackingProps & Omit<FormControlBaseProps<(...args: any[]) => void, HTMLElement>, 'onChange' | 'controlState' | 'onBlur' | 'onFocus'> & {
+export type SegmentSelectorProps = DOMProps & WithChildren & StylingProps & DataTestId & MaskingProps & BehaviorTrackingProps & Omit<FormControlBaseProps<(...args: any[]) => void, HTMLButtonElement>, 'onChange' | 'controlState'> & {
     /**
      * Internal: associates this control with a `_Form` rendered outside its
      * React subtree via the native `form` attribute. Unstable.

package/filters/segment-selector/parts/EmptySegments.css

@@ -1,4 +1,4 @@
-._awal5d0-3-11-3._awal5d0-3-11-3 {
+._awal5d0-3-12-0._awal5d0-3-12-0 {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);

package/filters/segment-selector/parts/EmptySegments.sty.js

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

package/filters/segment-selector/parts/Overlay.css

@@ -1,10 +1,10 @@
-._bqi6d90-3-11-3 {
+._bqi6d90-3-12-0 {
   height: 15px;
   align-self: center;
   margin-right: var(--dt-spacings-size-2, 2px);
   margin-left: var(--dt-spacings-size-8, 8px);
 }
-._bqi6d91-3-11-3._bqi6d91-3-11-3 {
+._bqi6d91-3-12-0._bqi6d91-3-12-0 {
   display: flex;
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
@@ -14,24 +14,24 @@
   text-transform: var(--dt-typography-text-base-emphasized-text-transform, none);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._bqi6d92-3-11-3 {
+._bqi6d92-3-12-0 {
   max-width: 480px;
   min-width: 320px;
   box-sizing: border-box;
   overflow: hidden;
 }
-._bqi6d93-3-11-3 {
+._bqi6d93-3-12-0 {
   max-height: 396px;
   overflow: auto;
   box-sizing: border-box;
 }
-._bqi6d93-3-11-3 ._bqi6d94-3-11-3 {
+._bqi6d93-3-12-0 ._bqi6d94-3-12-0 {
   overflow: hidden;
 }
-._bqi6d95-3-11-3 {
+._bqi6d95-3-12-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._bqi6d96-3-11-3._bqi6d96-3-11-3 {
+._bqi6d96-3-12-0._bqi6d96-3-12-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
@@ -40,6 +40,6 @@
   text-decoration: var(--dt-typography-text-small-emphasized-text-decoration, none);
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._bqi6d97-3-11-3 > fieldset > div {
+._bqi6d97-3-12-0 > fieldset > div {
   gap: var(--dt-spacings-size-8, 8px);
 }

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

@@ -300,7 +300,7 @@ const SegmentsContent = ({ cachedSegments, id }) => {
           ),
           !readOnly && import_SegmentsCache.segmentsClient.hasAccessRights === true && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SegmentsPresetsList.SegmentsPresetList, { showDivider: hasSelection })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, { "aria-hidden": true }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SegmentFooter.SegmentFooter, {})
       ]
     }

package/filters/segment-selector/parts/Overlay.sty.js

@@ -28,11 +28,11 @@ __export(Overlay_css_exports, {
 });
 module.exports = __toCommonJS(Overlay_css_exports);
 var import_Overlay_css_ts_vanilla = require("./Overlay.css");
-var divider = "_bqi6d90-3-11-3";
-var fieldSet = "_bqi6d97-3-11-3";
-var isAnimating = "_bqi6d94-3-11-3";
-var legend = "_bqi6d96-3-11-3";
-var link = "_bqi6d95-3-11-3";
-var menuLink = "_bqi6d91-3-11-3";
-var overlayDefaultWidth = "_bqi6d92-3-11-3";
-var scrollContainer = "_bqi6d93-3-11-3";
+var divider = "_bqi6d90-3-12-0";
+var fieldSet = "_bqi6d97-3-12-0";
+var isAnimating = "_bqi6d94-3-12-0";
+var legend = "_bqi6d96-3-12-0";
+var link = "_bqi6d95-3-12-0";
+var menuLink = "_bqi6d91-3-12-0";
+var overlayDefaultWidth = "_bqi6d92-3-12-0";
+var scrollContainer = "_bqi6d93-3-12-0";

package/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.css

@@ -1,17 +1,17 @@
-._7mq3is0-3-11-3 {
+._7mq3is0-3-12-0 {
   all: unset;
   padding: 0;
   width: 100%;
   transition: height var(--dt-animations-expand-collapse-duration-fast, 250ms) var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._7mq3is1-3-11-3 {
+._7mq3is1-3-12-0 {
   height: 0;
   opacity: 0;
 }
-._7mq3is2-3-11-3 {
+._7mq3is2-3-12-0 {
   height: auto;
   opacity: 1;
 }
-._7mq3is3-3-11-3 {
+._7mq3is3-3-12-0 {
   all: unset;
 }