@dynatrace/strato-components 3.5.2 → 3.7.0

package/filters/filter-field/FilterField.js

@@ -233,7 +233,8 @@ const _FilterField = (0, import_react.forwardRef)(
       if (showError && !hasFormControlError && !hasSyntaxError && !formFieldMessageState.showError) {
         setShowError(false);
       }
-      if (!editorViewRef.current?.hasFocus && formFieldMessageState.isTouched && (hasFormControlError || formFieldMessageState.showError || hasSyntaxError)) {
+      const hasNotFocusInside = !editorViewRef.current?.hasFocus && !internalRootRef.current?.contains(document.activeElement);
+      if (hasNotFocusInside && formFieldMessageState.isTouched && (hasFormControlError || formFieldMessageState.showError || hasSyntaxError)) {
         setShowError(true);
       }
     }, [
@@ -550,8 +551,12 @@ const _FilterField = (0, import_react.forwardRef)(
             }
             if (annotation === import_editor_config.ANNOTATION_END_PASTING_MODE) {
               queueMicrotask(() => {
-                if (editorViewRef?.current) {
-                  (0, import_autocomplete.startCompletion)(editorViewRef.current);
+                try {
+                  if (editorViewRef?.current) {
+                    (0, import_autocomplete.startCompletion)(editorViewRef.current);
+                  }
+                } catch (e) {
+                  showBoundary(e);
                 }
               });
             }
@@ -682,37 +687,45 @@ const _FilterField = (0, import_react.forwardRef)(
       }
       const doc = editorViewRef.current.state.doc;
       queueMicrotask(() => {
-        if (editorViewRef.current) {
-          const tree = (0, import_language.syntaxTree)(editorViewRef.current.state);
-          const { tree: convertedTree, isValid } = getSyntaxTree({
-            tree,
-            view: editorViewRef.current,
-            numberParser,
-            doc: doc.toString(),
-            internalValidatorMap: internalValidatorMapRef.current,
-            customTypes: customTypesRef.current,
-            parserConfig
-          });
-          updateSyntaxError(isValid);
-          onChangeRef.current?.(doc.toString(), convertedTree, isValid);
-          onInputChange();
-          viewDispatch({
-            effects: [import_editor_config.validatorMapEffect.of(validatorMapRef?.current)],
-            // In order to re-run the decorations and re-generate errors and diagnostics,
-            // we have to dispatch a new document.
-            changes: {
-              from: 0,
-              to: editorViewRef.current.state.doc.length,
-              insert: doc.toString()
-            }
-          });
-          if (validatorMapChanged || customTypesChanged) {
-            queueMicrotask(() => {
-              if (editorViewRef.current) {
-                (0, import_autocomplete.startCompletion)(editorViewRef.current);
+        try {
+          if (editorViewRef.current) {
+            const tree = (0, import_language.syntaxTree)(editorViewRef.current.state);
+            const { tree: convertedTree, isValid } = getSyntaxTree({
+              tree,
+              view: editorViewRef.current,
+              numberParser,
+              doc: doc.toString(),
+              internalValidatorMap: internalValidatorMapRef.current,
+              customTypes: customTypesRef.current,
+              parserConfig
+            });
+            updateSyntaxError(isValid);
+            onChangeRef.current?.(doc.toString(), convertedTree, isValid);
+            onInputChange();
+            viewDispatch({
+              effects: [import_editor_config.validatorMapEffect.of(validatorMapRef?.current)],
+              // In order to re-run the decorations and re-generate errors and diagnostics,
+              // we have to dispatch a new document.
+              changes: {
+                from: 0,
+                to: editorViewRef.current.state.doc.length,
+                insert: doc.toString()
               }
             });
+            if (validatorMapChanged || customTypesChanged) {
+              queueMicrotask(() => {
+                try {
+                  if (editorViewRef.current) {
+                    (0, import_autocomplete.startCompletion)(editorViewRef.current);
+                  }
+                } catch (e) {
+                  showBoundary(e);
+                }
+              });
+            }
           }
+        } catch (e) {
+          showBoundary(e);
         }
       });
     }
@@ -745,48 +758,54 @@ const _FilterField = (0, import_react.forwardRef)(
       setPrevValue(value);
       valueRef.current = value;
       queueMicrotask(() => {
-        setAction({
-          type: "controlledValueChange",
-          data: {
-            value: prevValue ?? "",
-            newValue: valueRef.current
+        try {
+          setAction({
+            type: "controlledValueChange",
+            data: {
+              value: prevValue ?? "",
+              newValue: valueRef.current
+            }
+          });
+          onInputChange();
+          const lastTransaction = transactionRef.current && transactionRef.current[transactionRef.current.length - 1];
+          const selection = lastTransaction?.selection ?? // Fall back to the current editor selection in case the last transaction is undefined
+          // to avoid a jumping cursor when typing really fast.
+          editorViewRef.current?.state.selection;
+          const anchor = Math.min(
+            value.length,
+            (isEditorSelection(selection) ? selection.ranges[0].anchor : selection?.anchor) ?? value.length
+          );
+          let dispatchedSelection = {
+            anchor
+          };
+          if (valuePlaceholderWildcardSelection.current?.isActive && valuePlaceholderWildcardSelection.current?.potentialNewValue === value) {
+            const selectionFrom = valuePlaceholderWildcardSelection.current.range?.from;
+            const selectionTo = valuePlaceholderWildcardSelection.current.range?.to;
+            if (selectionFrom && selectionFrom <= value.length && selectionTo && selectionTo <= value.length) {
+              dispatchedSelection = {
+                anchor: selectionFrom,
+                head: selectionTo
+              };
+            }
           }
-        });
-        onInputChange();
-        const lastTransaction = transactionRef.current && transactionRef.current[transactionRef.current.length - 1];
-        const selection = lastTransaction?.selection ?? // Fall back to the current editor selection in case the last transaction is undefined
-        // to avoid a jumping cursor when typing really fast.
-        editorViewRef.current?.state.selection;
-        const anchor = Math.min(
-          value.length,
-          (isEditorSelection(selection) ? selection.ranges[0].anchor : selection?.anchor) ?? value.length
-        );
-        let dispatchedSelection = { anchor };
-        if (valuePlaceholderWildcardSelection.current?.isActive && valuePlaceholderWildcardSelection.current?.potentialNewValue === value) {
-          const selectionFrom = valuePlaceholderWildcardSelection.current.range?.from;
-          const selectionTo = valuePlaceholderWildcardSelection.current.range?.to;
-          if (selectionFrom && selectionFrom <= value.length && selectionTo && selectionTo <= value.length) {
-            dispatchedSelection = {
-              anchor: selectionFrom,
-              head: selectionTo
+          viewDispatch({
+            changes: {
+              from: 0,
+              to: editorViewRef.current?.state.doc.length ?? 0,
+              insert: value
+            },
+            annotations: import_editor_config.stringAnnotation.of(import_editor_config.ANNOTATION_DOC_CHANGED_CONTROLLED),
+            selection: dispatchedSelection
+          });
+          if (valuePlaceholderWildcardSelection.current) {
+            valuePlaceholderWildcardSelection.current = {
+              isActive: false
             };
           }
+          transactionRef.current = void 0;
+        } catch (e) {
+          showBoundary(e);
         }
-        viewDispatch({
-          changes: {
-            from: 0,
-            to: editorViewRef.current?.state.doc.length ?? 0,
-            insert: value
-          },
-          annotations: import_editor_config.stringAnnotation.of(import_editor_config.ANNOTATION_DOC_CHANGED_CONTROLLED),
-          selection: dispatchedSelection
-        });
-        if (valuePlaceholderWildcardSelection.current) {
-          valuePlaceholderWildcardSelection.current = {
-            isActive: false
-          };
-        }
-        transactionRef.current = void 0;
       });
     }
     if (disabled !== prevPropDisabled || required !== prevPropRequired || readOnly !== prevPropReadOnly || id !== prevPropId) {
@@ -919,8 +938,16 @@ const _FilterField = (0, import_react.forwardRef)(
                   hideDeleteWhileTyping
                 }
               ),
-              onBlur: onInputBlur,
+              onBlur: (event) => {
+                if (event.relatedTarget instanceof Node && internalRootRef.current?.contains(event.relatedTarget)) {
+                  return;
+                }
+                onInputBlur();
+              },
               onKeyDown: (event) => {
+                if (event.target instanceof HTMLElement && event.target.closest("button")) {
+                  return;
+                }
                 if (readOnly && event.key !== "Tab" && !event.ctrlKey) {
                   event.preventDefault();
                   return;

package/filters/filter-field/FilterField.sty.js

@@ -50,31 +50,31 @@ module.exports = __toCommonJS(FilterField_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_FilterField_css_ts_vanilla = require("./FilterField.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var ariaDisabled = "_96tj13o-3-5-2";
-var container = "_96tj13c-3-5-2";
-var disabled = "_96tj13p-3-5-2 _96tj13n-3-5-2 _96tj13o-3-5-2";
-var error = "_96tj1311-3-5-2";
-var errorText = "_96tj13e-3-5-2";
-var errorVars = "_96tj13d-3-5-2";
-var escapedCharacter = "_96tj1310-3-5-2";
-var existsOperator = "_96tj13z-3-5-2";
-var filterIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13f-3-5-2", variantClassNames: { hasError: { true: "_96tj13g-3-5-2" }, disabled: { true: "_96tj13h-3-5-2" } }, defaultVariants: { hasError: false, disabled: false }, compoundVariants: [] });
-var filterKey = "_96tj13v-3-5-2";
-var filterStatement = "_96tj13j-3-5-2 _96tj13i-3-5-2";
-var filterStatementBase = "_96tj13i-3-5-2";
-var filterStatementDeleteButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13r-3-5-2", variantClassNames: { incomplete: { true: "_96tj13s-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
-var filterStatementDeleteIcon = "_96tj13t-3-5-2";
-var filterStatementDeleteWidget = "_96tj13q-3-5-2";
-var filterValue = "_96tj13w-3-5-2";
-var incompleteFilterStatement = "_96tj13k-3-5-2 _96tj13i-3-5-2";
-var intermediateFilterStatement = "_96tj13l-3-5-2";
-var operator = "_96tj13y-3-5-2";
-var pastedContent = "_96tj13m-3-5-2";
-var postSpotError = "_96tj1314-3-5-2";
-var preSpotError = "_96tj1313-3-5-2";
-var readOnly = "_96tj13n-3-5-2";
-var spotError = "_96tj1312-3-5-2";
-var suggestionHintContainer = "_96tj13u-3-5-2";
-var suggestionsOverlayAnnouncement = "_96tj1315-3-5-2";
-var variable = "_96tj13x-3-5-2";
-var wrapper = "_96tj13b-3-5-2";
+var ariaDisabled = "_96tj13o-3-7-0";
+var container = "_96tj13c-3-7-0";
+var disabled = "_96tj13p-3-7-0 _96tj13n-3-7-0 _96tj13o-3-7-0";
+var error = "_96tj1311-3-7-0";
+var errorText = "_96tj13e-3-7-0";
+var errorVars = "_96tj13d-3-7-0";
+var escapedCharacter = "_96tj1310-3-7-0";
+var existsOperator = "_96tj13z-3-7-0";
+var filterIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13f-3-7-0", variantClassNames: { hasError: { true: "_96tj13g-3-7-0" }, disabled: { true: "_96tj13h-3-7-0" } }, defaultVariants: { hasError: false, disabled: false }, compoundVariants: [] });
+var filterKey = "_96tj13v-3-7-0";
+var filterStatement = "_96tj13j-3-7-0 _96tj13i-3-7-0";
+var filterStatementBase = "_96tj13i-3-7-0";
+var filterStatementDeleteButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13r-3-7-0", variantClassNames: { incomplete: { true: "_96tj13s-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var filterStatementDeleteIcon = "_96tj13t-3-7-0";
+var filterStatementDeleteWidget = "_96tj13q-3-7-0";
+var filterValue = "_96tj13w-3-7-0";
+var incompleteFilterStatement = "_96tj13k-3-7-0 _96tj13i-3-7-0";
+var intermediateFilterStatement = "_96tj13l-3-7-0";
+var operator = "_96tj13y-3-7-0";
+var pastedContent = "_96tj13m-3-7-0";
+var postSpotError = "_96tj1314-3-7-0";
+var preSpotError = "_96tj1313-3-7-0";
+var readOnly = "_96tj13n-3-7-0";
+var spotError = "_96tj1312-3-7-0";
+var suggestionHintContainer = "_96tj13u-3-7-0";
+var suggestionsOverlayAnnouncement = "_96tj1315-3-7-0";
+var variable = "_96tj13x-3-7-0";
+var wrapper = "_96tj13b-3-7-0";

package/filters/filter-field/components/FilterFieldSuffixButtons.css

@@ -1,13 +1,13 @@
-._ck599t0-3-5-2 {
+._ck599t0-3-7-0 {
   position: absolute;
   right: var(--dt-spacings-size-4, 4px);
   top: var(--dt-spacings-size-4, 4px);
   z-index: 1;
   gap: var(--dt-spacings-size-2, 2px);
 }
-._ck599t1-3-5-2 {
+._ck599t1-3-7-0 {
   margin: var(--dt-spacings-size-2, 2px) 0;
 }
-._ck599t2-3-5-2 {
+._ck599t2-3-7-0 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }

package/filters/filter-field/components/FilterFieldSuffixButtons.js

@@ -68,6 +68,7 @@ function FilterFieldSuffixButtons(props) {
         },
         annotations: import_state.Transaction.userEvent.of("clear")
       });
+      editorView.focus();
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { className: styles.suffix, gap: 2, children: [

package/filters/filter-field/components/FilterFieldSuffixButtons.sty.js

@@ -23,6 +23,6 @@ __export(FilterFieldSuffixButtons_css_exports, {
 });
 module.exports = __toCommonJS(FilterFieldSuffixButtons_css_exports);
 var import_FilterFieldSuffixButtons_css_ts_vanilla = require("./FilterFieldSuffixButtons.css");
-var button = "_ck599t2-3-5-2";
-var divider = "_ck599t1-3-5-2";
-var suffix = "_ck599t0-3-5-2";
+var button = "_ck599t2-3-7-0";
+var divider = "_ck599t1-3-7-0";
+var suffix = "_ck599t0-3-7-0";

package/filters/filter-field/components/FilterStatement.css

@@ -1,4 +1,4 @@
-._ia7amm2-3-5-2 {
+._ia7amm2-3-7-0 {
   overflow-x: hidden;
   overflow-y: auto;
   text-overflow: ellipsis;
@@ -9,51 +9,51 @@
   min-height: 21px;
   white-space: pre;
 }
-._1smjoa1a-3-5-2 ._ia7amm2-3-5-2 {
+._1smjoa1b-3-7-0 ._ia7amm2-3-7-0 {
   line-height: 24px;
   padding-right: 12px;
   white-space: pre-wrap;
 }
-._ia7amm3-3-5-2 {
+._ia7amm3-3-7-0 {
   padding: var(--dt-spacings-size-2, 2px) calc(var(--dt-spacings-size-4, 4px) - var(--dt-borders-width-default, 1px)) 3px;
   border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   transition: borderRadius var(--dt-timings-base-default, 300ms);
   text-wrap: nowrap;
 }
-._1smjoa14-3-5-2:hover ._ia7amm3-3-5-2, ._1smjoa14-3-5-2._9mvxlq0-3-5-2 ._ia7amm3-3-5-2 {
+._1smjoa15-3-7-0:hover ._ia7amm3-3-7-0, ._1smjoa15-3-7-0._9mvxlq0-3-7-0 ._ia7amm3-3-7-0 {
   border-color: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
 }
-._ia7amm0-3-5-2 ._ia7amm3-3-5-2 {
+._ia7amm0-3-7-0 ._ia7amm3-3-7-0 {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   border-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1smjoa1a-3-5-2 ._ia7amm3-3-5-2 {
+._1smjoa1b-3-7-0 ._ia7amm3-3-7-0 {
   text-wrap: wrap;
 }
-._ia7amm0-3-5-2 ._ia7amm4-3-5-2::highlight(filter-field-escape-characters) {
+._ia7amm0-3-7-0 ._ia7amm4-3-7-0::highlight(filter-field-escape-characters) {
   color: var(--dt-colors-syntax-operators, #8136a9);
 }
-._ia7amm1-3-5-2 ._ia7amm3-3-5-2 * {
+._ia7amm1-3-7-0 ._ia7amm3-3-7-0 * {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._ia7amm1-3-5-2 ._96tj13y-3-5-2 {
+._ia7amm1-3-7-0 ._96tj13y-3-7-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._ia7amm1-3-5-2::highlight(filterfield-suggestions-highlight) {
+._ia7amm1-3-7-0::highlight(filterfield-suggestions-highlight) {
   text-decoration: none;
 }
-._ia7amm3-3-5-2::highlight(filterfield-suggestions-highlight) {
+._ia7amm3-3-7-0::highlight(filterfield-suggestions-highlight) {
   text-decoration: underline;
   text-decoration-color: var(--dt-colors-border-neutral-accent, #595a7d);
   text-underline-offset: 4.2px;
 }
-._ia7amm5-3-5-2 + ._ia7amm6-3-5-2:has(+ ._ia7amm5-3-5-2) {
+._ia7amm5-3-7-0 + ._ia7amm6-3-7-0:has(+ ._ia7amm5-3-7-0) {
   text-decoration: underline;
   text-decoration-color: var(--dt-colors-border-neutral-accent, #595a7d);
   text-underline-offset: 4.2px;
 }
-._1smjoa1a-3-5-2 div:has(._ia7amm2-3-5-2) {
+._1smjoa1b-3-7-0 div:has(._ia7amm2-3-7-0) {
   max-height: 72px;
   padding-right: 0;
 }

package/filters/filter-field/components/FilterStatement.sty.js

@@ -31,9 +31,9 @@ var import_FilterField_css_ts_vanilla = require("../FilterField.css");
 var import_SuggestionsOverlay_css_ts_vanilla = require("../suggestions/SuggestionsOverlay.css");
 var import_Suggestion_css_ts_vanilla = require("../suggestions/Suggestion.css");
 var import_FilterStatement_css_ts_vanilla = require("./FilterStatement.css");
-var escapeCharacter = "_ia7amm4-3-5-2";
-var highlight = "_ia7amm5-3-5-2";
-var highlighting = { syntax: "_ia7amm0-3-5-2", minimal: "_ia7amm1-3-5-2" };
-var root = "_ia7amm2-3-5-2 _96tj13c-3-5-2";
-var statement = "_ia7amm3-3-5-2";
-var whitespace = "_ia7amm6-3-5-2";
+var escapeCharacter = "_ia7amm4-3-7-0";
+var highlight = "_ia7amm5-3-7-0";
+var highlighting = { syntax: "_ia7amm0-3-7-0", minimal: "_ia7amm1-3-7-0" };
+var root = "_ia7amm2-3-7-0 _96tj13c-3-7-0";
+var statement = "_ia7amm3-3-7-0";
+var whitespace = "_ia7amm6-3-7-0";

package/filters/filter-field/decorations/escaped-characters.js

@@ -32,7 +32,8 @@ function createEscapedCharacterDecorations(view) {
     const escapedCharacters = stringInput.matchAll(import_escape_suggestion.ESCAPED_CHARACTERS_REGEX);
     for (const match of escapedCharacters) {
       const { index } = match;
-      builder.add(index, index + 2, import_decoration_marks.escapedCharacterMark);
+      const absoluteIndex = from + index;
+      builder.add(absoluteIndex, absoluteIndex + 2, import_decoration_marks.escapedCharacterMark);
     }
   }
   return builder.finish();

package/filters/filter-field/hooks/useShowMore.js

@@ -26,7 +26,7 @@ var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_useId = require("../../../core/hooks/useId.js");
-var import_getVirtualFocusStyles = require("../../../core/styles/getVirtualFocusStyles.js");
+var import_getVirtualFocusStyles = require("../../../core/utils/getVirtualFocusStyles.js");
 var import_Flex = require("../../../layouts/flex/Flex.js");
 var import_messages = require("../messages.js");
 var import_useFilterFieldContext = require("./useFilterFieldContext.js");

package/filters/filter-field/hooks/useSuggestions.js

@@ -23,6 +23,7 @@ __export(useSuggestions_exports, {
 module.exports = __toCommonJS(useSuggestions_exports);
 var import_view = require("@codemirror/view");
 var import_react = require("react");
+var import_react_error_boundary = require("react-error-boundary");
 var import_react_intl = require("react-intl");
 var import_useErrorLogsStore = require("./useErrorLogsStore.js");
 var import_useReferencedState = require("./useReferencedState.js");
@@ -55,6 +56,7 @@ function useSuggestions(props) {
     hiddenInputRef,
     ariaLabelingProps
   } = props;
+  const { showBoundary } = (0, import_react_error_boundary.useErrorBoundary)();
   const setUserAction = (0, import_useErrorLogsStore.useErrorLogsStore)((state) => state.setAction);
   const { ariaProps } = (0, import_useFormFieldValidation.useFormFieldValidation)(
     hiddenInputRef,
@@ -247,7 +249,11 @@ function useSuggestions(props) {
   );
   if (prevOpen && !isOpen) {
     queueMicrotask(() => {
-      onSuggest?.();
+      try {
+        onSuggest?.();
+      } catch (e) {
+        showBoundary(e);
+      }
     });
   }
   if (prevOpen !== isOpen || autoSuggestionValuesRef.current !== prevAutoSuggestionValues || recentSuggestionValuesRef.current !== prevRecentSuggestionValues || pastedContentSuggestionValuesRef.current !== prevPastedContentSuggestionValues || searchSuggestionValuesRef.current !== prevSearchSuggestionValues || fallbackKeySuggestionValuesRef.current !== prevFallbackKeySuggestionValues || statementSuggestionValuesRef.current !== prevStatementSuggestionValues) {

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

@@ -1,8 +1,8 @@
-._vt0w9g0-3-5-2 {
+._vt0w9g0-3-7-0 {
   display: grid;
   grid-template-columns: 1fr auto;
 }
-._vt0w9g1-3-5-2 {
+._vt0w9g1-3-7-0 {
   appearance: none;
   visibility: hidden;
   position: absolute;
@@ -12,25 +12,25 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._1smjoa13-3-5-2:hover ._vt0w9g1-3-5-2, ._1smjoa13-3-5-2:has(._9mvxlq0-3-5-2) ._vt0w9g1-3-5-2 {
+._1smjoa14-3-7-0:hover ._vt0w9g1-3-7-0, ._1smjoa14-3-7-0:has(._9mvxlq0-3-7-0) ._vt0w9g1-3-7-0 {
   position: initial;
   visibility: visible;
   height: 100%;
 }
-._1jgl8s50-3-5-2 ._vt0w9g1-3-5-2 {
+._1jgl8s50-3-7-0 ._vt0w9g1-3-7-0 {
   border-left-width: var(--dt-borders-width-default, 1px);
 }
-._1jgl8s50-3-5-2 ._vt0w9g1-3-5-2:hover {
+._1jgl8s50-3-7-0 ._vt0w9g1-3-7-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1jgl8s50-3-5-2 ._vt0w9g1-3-5-2:active {
+._1jgl8s50-3-7-0 ._vt0w9g1-3-7-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._vt0w9g0-3-5-2 ._1smjoa10-3-5-2 > div {
+._vt0w9g0-3-7-0 ._1smjoa10-3-7-0 > div {
   background-color: transparent;
 }
-@container _ssu5rt0-3-5-2 (min-width: 641px) {
-  ._vt0w9g0-3-5-2:hover ._tn2lgm0-3-5-2, ._vt0w9g0-3-5-2._9mvxlq0-3-5-2 ._tn2lgm0-3-5-2, ._vt0w9g0-3-5-2:has(._9mvxlq0-3-5-2) ._tn2lgm0-3-5-2 {
+@container _ssu5rt0-3-7-0 (min-width: 641px) {
+  ._vt0w9g0-3-7-0:hover ._tn2lgm0-3-7-0, ._vt0w9g0-3-7-0._9mvxlq0-3-7-0 ._tn2lgm0-3-7-0, ._vt0w9g0-3-7-0:has(._9mvxlq0-3-7-0) ._tn2lgm0-3-7-0 {
     display: none;
   }
 }

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

@@ -27,5 +27,5 @@ var import_virtualFocus_css_ts_vanilla = require("../../../core/styles/virtualFo
 var import_Suggestion_css_ts_vanilla = require("./Suggestion.css");
 var import_SuggestionDetails_css_ts_vanilla = require("./SuggestionDetails.css");
 var import_RecentPinnedSuggestionItem_css_ts_vanilla = require("./RecentPinnedSuggestionItem.css");
-var recentSuggestion = "_vt0w9g0-3-5-2";
-var suggestionPin = "_vt0w9g1-3-5-2";
+var recentSuggestion = "_vt0w9g0-3-7-0";
+var suggestionPin = "_vt0w9g1-3-7-0";

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

@@ -1,7 +1,7 @@
-._1smjoa11-3-5-2 {
+._1smjoa11-3-7-0 {
   min-width: 0;
 }
-._1smjoa13-3-5-2 {
+._1smjoa14-3-7-0 {
   cursor: pointer;
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
@@ -9,17 +9,17 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   overflow: hidden;
 }
-._1smjoa13-3-5-2:hover {
+._1smjoa14-3-7-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1smjoa13-3-5-2:has(._9mvxlq0-3-5-2) {
+._1smjoa14-3-7-0:has(._9mvxlq0-3-7-0) {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   transition: none;
 }
-._1jgl8s50-3-5-2 ._1smjoa13-3-5-2:hover {
+._1jgl8s50-3-7-0 ._1smjoa14-3-7-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1smjoa14-3-5-2 {
+._1smjoa15-3-7-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
@@ -27,68 +27,68 @@
   flex: 1;
   grid-auto-flow: row;
 }
-._1smjoa14-3-5-2:hover {
+._1smjoa15-3-7-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1smjoa14-3-5-2:active {
+._1smjoa15-3-7-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1smjoa13-3-5-2 span:only-child ._1smjoa14-3-5-2 {
+._1smjoa14-3-7-0 span:only-child ._1smjoa15-3-7-0 {
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1smjoa15-3-5-2 {
+._1smjoa16-3-7-0 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1smjoa16-3-5-2 {
+._1smjoa17-3-7-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-weight: var(--dt-typography-text-base-default-weight, 400);
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._1smjoa17-3-5-2 {
+._1smjoa18-3-7-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-weight: var(--dt-typography-text-base-default-weight, 400);
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-12, 12px);
 }
-._1smjoa18-3-5-2 {
+._1smjoa19-3-7-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1smjoa19-3-5-2 {
+._1smjoa1a-3-7-0 {
   white-space: nowrap;
   gap: 0;
 }
-._1smjoa1a-3-5-2 {
+._1smjoa1b-3-7-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._1smjoa1a-3-5-2 mark, ._1smjoa13-3-5-2 mark, ._1smjoa13-3-5-2:not(._1smjoa1b-3-5-2) *::highlight(filterfield-suggestions-highlight) {
+._1smjoa1b-3-7-0 mark, ._1smjoa14-3-7-0 mark, ._1smjoa14-3-7-0:not(._1smjoa1c-3-7-0) *::highlight(filterfield-suggestions-highlight) {
   white-space: pre-wrap;
   background: none;
   color: inherit;
   text-decoration: underline;
 }
-._1smjoa15-3-5-2 > mark, ._1smjoa15-3-5-2 > span {
+._1smjoa16-3-7-0 > mark, ._1smjoa16-3-7-0 > span {
   white-space: nowrap;
 }
-._1smjoa1c-3-5-2 ._1smjoa10-3-5-2 > div {
+._1smjoa1d-3-7-0 ._1smjoa10-3-7-0 > div {
   background-color: transparent;
 }
-._1smjoa19-3-5-2 mark {
+._1smjoa1a-3-7-0 mark {
   white-space: preserve nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1smjoa1e-3-5-2 ._1smjoa10-3-5-2 > div {
+._1smjoa1f-3-7-0 ._1smjoa10-3-7-0 > div {
   background-color: transparent;
 }
-@container _ssu5rt0-3-5-2 (min-width: 641px) {
-  ._1smjoa14-3-5-2 {
+@container _ssu5rt0-3-7-0 (min-width: 641px) {
+  ._1smjoa15-3-7-0 {
     grid-auto-flow: column;
     justify-content: space-between;
   }
 }
-@container _ssu5rt0-3-5-2 (min-width: 1921px) {
-  ._1smjoa14-3-5-2 {
+@container _ssu5rt0-3-7-0 (min-width: 1921px) {
+  ._1smjoa15-3-7-0 {
     grid-auto-columns: 30% auto;
     justify-content: start;
   }