@dynatrace/strato-components 3.5.2 → 3.7.0

package/esm/editors/dql-editor/dql/dql.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/dql/dql.ts"],
-  "sourcesContent": ["import { simpleMode } from '@codemirror/legacy-modes/mode/simple-mode';\n\nimport {\n  booleanLiteralPattern,\n  dqlUnitSuffixPattern,\n  parameterNamePattern,\n  sortedDqlCommands,\n} from '../../../core/dql/dql-common.js';\n\nconst tokenMapping = {\n  command: 'keyword',\n  comment: 'comment',\n  parameter: 'variableName',\n  string: 'string',\n  number: 'number',\n  bool: 'bool',\n} as const;\n\nconst startComment = [\n  { regex: /\\/\\/.*/, token: tokenMapping.comment }, // single line comment\n  { regex: /\\/\\*.*?/, token: tokenMapping.comment, push: 'comment' }, // start of multiline comment\n];\n\nexport const dql = simpleMode({\n  start: [\n    ...startComment,\n    {\n      regex: new RegExp(\n        `(\\\\s*)((?:${sortedDqlCommands.join('|')})\\\\b\\\\s*)`,\n        'i',\n      ),\n      token: ['', tokenMapping.command],\n      next: 'parameters',\n    },\n    {\n      // We want to tokenize parts of a query as well, so in case of no command\n      // in the start state, we go directly to the `parameters` state\n      regex: /\\s*\\b/,\n      next: 'parameters',\n    },\n  ],\n  comment: [\n    { regex: /.*?\\*\\//, token: tokenMapping.comment, pop: true }, // end of multiline comment\n    { regex: /.*/, token: tokenMapping.comment },\n  ],\n  parameters: [\n    ...startComment,\n    { regex: parameterNamePattern, token: tokenMapping.parameter }, // parameter, eg: scanLimitGb:\n    { regex: booleanLiteralPattern, token: tokenMapping.bool }, // boolean literals (true/false)\n    { regex: /[A-Za-z\\]]+[A-Za-z_.0-9]+/ }, // identifier, eg: runs_on or metricsJson\n    { regex: /\"\"\"/, token: tokenMapping.string, push: 'tripleQuoteString' },\n    { regex: /\"/, token: tokenMapping.string, push: 'doubleQuoteString' },\n    { regex: /`/, token: tokenMapping.string, push: 'backtickString' },\n    {\n      regex: new RegExp(`(\\\\d+(?:\\\\.\\\\d+)?${dqlUnitSuffixPattern}?)(?![.\\\\w])`), // Match numbers with optional unit suffix\n      token: tokenMapping.number,\n    },\n    {\n      regex: /(\\[)([0-9]*)(\\])/, // array index access, e.g: [0] or [200]\n      token: ['', tokenMapping.number, ''], // only highlight number; do not highlight surrounding square brackets\n    },\n    {\n      regex: /(\\[)(`(?:[^`\\\\]|\\\\.)*`)(])/, // nested property access, e.g: [`app.kubernetes.io/version`]\n      token: ['', tokenMapping.string, ''], // only highlight content and backticks; do not highlight surrounding square brackets\n    },\n    { regex: /\\||\\[/, next: 'start' }, // start matching a new query syntax after | or [\n  ],\n  tripleQuoteString: [\n    { regex: /[\\s\\S]*\"\"\"/, token: tokenMapping.string, pop: true },\n    { regex: /.*/, token: tokenMapping.string },\n  ],\n  doubleQuoteString: [\n    { regex: /\"/, token: tokenMapping.string, pop: true },\n    // Note on following {0,3000000}: stop at 3 million characters per line to avoid crash.\n    // Code-mirror only shows 2 million characters per line anyway.\n    { regex: /(?:[^\\\\\"]|\\\\(?:.|$)){0,3000000}/, token: tokenMapping.string },\n  ],\n  backtickString: [\n    { regex: /`/, token: tokenMapping.string, pop: true },\n    { regex: /(?:[^\\\\`]|\\\\(?:.|$))*/, token: tokenMapping.string },\n  ],\n  languageData: {\n    name: 'dql',\n    dontIndentStates: [],\n    indentOnInput: /^\\s*\\}$/,\n    commentTokens: { line: '//', block: { open: '/*', close: '*/' } },\n    mergeTokens: false,\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAE3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,eAAe;AAAA,EACnB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AACR;AAEA,MAAM,eAAe;AAAA,EACnB,EAAE,OAAO,UAAU,OAAO,aAAa,QAAQ;AAAA;AAAA,EAC/C,EAAE,OAAO,WAAW,OAAO,aAAa,SAAS,MAAM,UAAU;AAAA;AACnE;AAEO,MAAM,MAAM,WAAW;AAAA,EAC5B,OAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,MACE,OAAO,IAAI;AAAA,QACT,aAAa,kBAAkB,KAAK,GAAG,CAAC;AAAA,QACxC;AAAA,MACF;AAAA,MACA,OAAO,CAAC,IAAI,aAAa,OAAO;AAAA,MAChC,MAAM;AAAA,IACR;AAAA,IACA;AAAA;AAAA;AAAA,MAGE,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,EAAE,OAAO,WAAW,OAAO,aAAa,SAAS,KAAK,KAAK;AAAA;AAAA,IAC3D,EAAE,OAAO,MAAM,OAAO,aAAa,QAAQ;AAAA,EAC7C;AAAA,EACA,YAAY;AAAA,IACV,GAAG;AAAA,IACH,EAAE,OAAO,sBAAsB,OAAO,aAAa,UAAU;AAAA;AAAA,IAC7D,EAAE,OAAO,uBAAuB,OAAO,aAAa,KAAK;AAAA;AAAA,IACzD,EAAE,OAAO,4BAA4B;AAAA;AAAA,IACrC,EAAE,OAAO,OAAO,OAAO,aAAa,QAAQ,MAAM,oBAAoB;AAAA,IACtE,EAAE,OAAO,KAAK,OAAO,aAAa,QAAQ,MAAM,oBAAoB;AAAA,IACpE,EAAE,OAAO,KAAK,OAAO,aAAa,QAAQ,MAAM,iBAAiB;AAAA,IACjE;AAAA,MACE,OAAO,IAAI,OAAO,oBAAoB,oBAAoB,cAAc;AAAA;AAAA,MACxE,OAAO,aAAa;AAAA,IACtB;AAAA,IACA;AAAA,MACE,OAAO;AAAA;AAAA,MACP,OAAO,CAAC,IAAI,aAAa,QAAQ,EAAE;AAAA;AAAA,IACrC;AAAA,IACA;AAAA,MACE,OAAO;AAAA;AAAA,MACP,OAAO,CAAC,IAAI,aAAa,QAAQ,EAAE;AAAA;AAAA,IACrC;AAAA,IACA,EAAE,OAAO,SAAS,MAAM,QAAQ;AAAA;AAAA,EAClC;AAAA,EACA,mBAAmB;AAAA,IACjB,EAAE,OAAO,cAAc,OAAO,aAAa,QAAQ,KAAK,KAAK;AAAA,IAC7D,EAAE,OAAO,MAAM,OAAO,aAAa,OAAO;AAAA,EAC5C;AAAA,EACA,mBAAmB;AAAA,IACjB,EAAE,OAAO,KAAK,OAAO,aAAa,QAAQ,KAAK,KAAK;AAAA;AAAA;AAAA,IAGpD,EAAE,OAAO,mCAAmC,OAAO,aAAa,OAAO;AAAA,EACzE;AAAA,EACA,gBAAgB;AAAA,IACd,EAAE,OAAO,KAAK,OAAO,aAAa,QAAQ,KAAK,KAAK;AAAA,IACpD,EAAE,OAAO,yBAAyB,OAAO,aAAa,OAAO;AAAA,EAC/D;AAAA,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,kBAAkB,CAAC;AAAA,IACnB,eAAe;AAAA,IACf,eAAe,EAAE,MAAM,MAAM,OAAO,EAAE,MAAM,MAAM,OAAO,KAAK,EAAE;AAAA,IAChE,aAAa;AAAA,EACf;AACF,CAAC;",
+  "sourcesContent": ["import { simpleMode } from '@codemirror/legacy-modes/mode/simple-mode';\n\nimport {\n  booleanLiteralPattern,\n  dqlUnitSuffixPattern,\n  nullLiteralPattern,\n  parameterNamePattern,\n  sortedDqlCommands,\n} from '../../../core/dql/dql-common.js';\n\nconst tokenMapping = {\n  command: 'keyword',\n  comment: 'comment',\n  parameter: 'variableName',\n  string: 'string',\n  number: 'number',\n  bool: 'bool',\n  null: 'bool', // null uses the same token as boolean literals\n} as const;\n\nconst startComment = [\n  { regex: /\\/\\/.*/, token: tokenMapping.comment }, // single line comment\n  { regex: /\\/\\*.*?/, token: tokenMapping.comment, push: 'comment' }, // start of multiline comment\n];\n\nexport const dql = simpleMode({\n  start: [\n    ...startComment,\n    {\n      regex: new RegExp(\n        `(\\\\s*)((?:${sortedDqlCommands.join('|')})\\\\b\\\\s*)`,\n        'i',\n      ),\n      token: ['', tokenMapping.command],\n      next: 'parameters',\n    },\n    {\n      // We want to tokenize parts of a query as well, so in case of no command\n      // in the start state, we go directly to the `parameters` state\n      regex: /\\s*\\b/,\n      next: 'parameters',\n    },\n  ],\n  comment: [\n    { regex: /.*?\\*\\//, token: tokenMapping.comment, pop: true }, // end of multiline comment\n    { regex: /.*/, token: tokenMapping.comment },\n  ],\n  parameters: [\n    ...startComment,\n    { regex: parameterNamePattern, token: tokenMapping.parameter }, // parameter, eg: scanLimitGb:\n    { regex: booleanLiteralPattern, token: tokenMapping.bool }, // boolean literals (true/false)\n    { regex: nullLiteralPattern, token: tokenMapping.null }, // null literal\n    { regex: /[A-Za-z\\]]+[A-Za-z_.0-9]+/ }, // identifier, eg: runs_on or metricsJson\n    { regex: /\"\"\"/, token: tokenMapping.string, push: 'tripleQuoteString' },\n    { regex: /\"/, token: tokenMapping.string, push: 'doubleQuoteString' },\n    { regex: /`/, token: tokenMapping.string, push: 'backtickString' },\n    {\n      regex: new RegExp(`(\\\\d+(?:\\\\.\\\\d+)?${dqlUnitSuffixPattern}?)(?![.\\\\w])`), // Match numbers with optional unit suffix\n      token: tokenMapping.number,\n    },\n    {\n      regex: /(\\[)([0-9]*)(\\])/, // array index access, e.g: [0] or [200]\n      token: ['', tokenMapping.number, ''], // only highlight number; do not highlight surrounding square brackets\n    },\n    {\n      regex: /(\\[)(`(?:[^`\\\\]|\\\\.)*`)(])/, // nested property access, e.g: [`app.kubernetes.io/version`]\n      token: ['', tokenMapping.string, ''], // only highlight content and backticks; do not highlight surrounding square brackets\n    },\n    { regex: /\\||\\[/, next: 'start' }, // start matching a new query syntax after | or [\n  ],\n  tripleQuoteString: [\n    { regex: /\"?\"?(?:[^\"]\"?\"?)*\"\"\"/, token: tokenMapping.string, pop: true }, // end of triple quote string: content cannot contain 3+ consecutive quotes\n    { regex: /.*/, token: tokenMapping.string },\n  ],\n  doubleQuoteString: [\n    { regex: /\"/, token: tokenMapping.string, pop: true },\n    // Note on following {0,3000000}: stop at 3 million characters per line to avoid crash.\n    // Code-mirror only shows 2 million characters per line anyway.\n    { regex: /(?:[^\\\\\"]|\\\\(?:.|$)){0,3000000}/, token: tokenMapping.string },\n  ],\n  backtickString: [\n    { regex: /`/, token: tokenMapping.string, pop: true },\n    { regex: /(?:[^\\\\`]|\\\\(?:.|$))*/, token: tokenMapping.string },\n  ],\n  languageData: {\n    name: 'dql',\n    dontIndentStates: [],\n    indentOnInput: /^\\s*\\}$/,\n    commentTokens: { line: '//', block: { open: '/*', close: '*/' } },\n    mergeTokens: false,\n  },\n});\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,eAAe;AAAA,EACnB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA;AACR;AAEA,MAAM,eAAe;AAAA,EACnB,EAAE,OAAO,UAAU,OAAO,aAAa,QAAQ;AAAA;AAAA,EAC/C,EAAE,OAAO,WAAW,OAAO,aAAa,SAAS,MAAM,UAAU;AAAA;AACnE;AAEO,MAAM,MAAM,WAAW;AAAA,EAC5B,OAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,MACE,OAAO,IAAI;AAAA,QACT,aAAa,kBAAkB,KAAK,GAAG,CAAC;AAAA,QACxC;AAAA,MACF;AAAA,MACA,OAAO,CAAC,IAAI,aAAa,OAAO;AAAA,MAChC,MAAM;AAAA,IACR;AAAA,IACA;AAAA;AAAA;AAAA,MAGE,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,EAAE,OAAO,WAAW,OAAO,aAAa,SAAS,KAAK,KAAK;AAAA;AAAA,IAC3D,EAAE,OAAO,MAAM,OAAO,aAAa,QAAQ;AAAA,EAC7C;AAAA,EACA,YAAY;AAAA,IACV,GAAG;AAAA,IACH,EAAE,OAAO,sBAAsB,OAAO,aAAa,UAAU;AAAA;AAAA,IAC7D,EAAE,OAAO,uBAAuB,OAAO,aAAa,KAAK;AAAA;AAAA,IACzD,EAAE,OAAO,oBAAoB,OAAO,aAAa,KAAK;AAAA;AAAA,IACtD,EAAE,OAAO,4BAA4B;AAAA;AAAA,IACrC,EAAE,OAAO,OAAO,OAAO,aAAa,QAAQ,MAAM,oBAAoB;AAAA,IACtE,EAAE,OAAO,KAAK,OAAO,aAAa,QAAQ,MAAM,oBAAoB;AAAA,IACpE,EAAE,OAAO,KAAK,OAAO,aAAa,QAAQ,MAAM,iBAAiB;AAAA,IACjE;AAAA,MACE,OAAO,IAAI,OAAO,oBAAoB,oBAAoB,cAAc;AAAA;AAAA,MACxE,OAAO,aAAa;AAAA,IACtB;AAAA,IACA;AAAA,MACE,OAAO;AAAA;AAAA,MACP,OAAO,CAAC,IAAI,aAAa,QAAQ,EAAE;AAAA;AAAA,IACrC;AAAA,IACA;AAAA,MACE,OAAO;AAAA;AAAA,MACP,OAAO,CAAC,IAAI,aAAa,QAAQ,EAAE;AAAA;AAAA,IACrC;AAAA,IACA,EAAE,OAAO,SAAS,MAAM,QAAQ;AAAA;AAAA,EAClC;AAAA,EACA,mBAAmB;AAAA,IACjB,EAAE,OAAO,wBAAwB,OAAO,aAAa,QAAQ,KAAK,KAAK;AAAA;AAAA,IACvE,EAAE,OAAO,MAAM,OAAO,aAAa,OAAO;AAAA,EAC5C;AAAA,EACA,mBAAmB;AAAA,IACjB,EAAE,OAAO,KAAK,OAAO,aAAa,QAAQ,KAAK,KAAK;AAAA;AAAA;AAAA,IAGpD,EAAE,OAAO,mCAAmC,OAAO,aAAa,OAAO;AAAA,EACzE;AAAA,EACA,gBAAgB;AAAA,IACd,EAAE,OAAO,KAAK,OAAO,aAAa,QAAQ,KAAK,KAAK;AAAA,IACpD,EAAE,OAAO,yBAAyB,OAAO,aAAa,OAAO;AAAA,EAC/D;AAAA,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,kBAAkB,CAAC;AAAA,IACnB,eAAe;AAAA,IACf,eAAe,EAAE,MAAM,MAAM,OAAO,EAAE,MAAM,MAAM,OAAO,KAAK,EAAE;AAAA,IAChE,aAAa;AAAA,EACf;AACF,CAAC;",
   "names": []
 }

package/esm/editors/dql-editor/dql/messages.js

@@ -0,0 +1,22 @@
+import { defineMessages } from "react-intl";
+const dqlEditorMessages = defineMessages({
+  openPanel: {
+    defaultMessage: "Open",
+    id: "QPVwTdDxajDwh62B",
+    description: "Label next to the Ctrl+Space keyboard shortcut in the DQL editor autocomplete info section, describing the action the shortcut triggers."
+  },
+  closePanel: {
+    defaultMessage: "Close",
+    id: "i7ML7nsvim1vfXlT",
+    description: "Label next to the Esc keyboard shortcut in the DQL editor autocomplete info section, describing the action the shortcut triggers."
+  },
+  dqlSyntaxLink: {
+    defaultMessage: "DQL syntax",
+    id: "anCkyfyzovTz3qtv",
+    description: "Link text in the DQL editor autocomplete info section, pointing to the external DQL syntax documentation."
+  }
+});
+export {
+  dqlEditorMessages
+};
+//# sourceMappingURL=messages.js.map

package/esm/editors/dql-editor/dql/messages.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/editors/dql-editor/dql/messages.ts"],
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const dqlEditorMessages = defineMessages({\n  openPanel: {\n    defaultMessage: 'Open',\n    id: 'QPVwTdDxajDwh62B',\n    description:\n      'Label next to the Ctrl+Space keyboard shortcut in the DQL editor autocomplete info section, describing the action the shortcut triggers.',\n  },\n  closePanel: {\n    defaultMessage: 'Close',\n    id: 'i7ML7nsvim1vfXlT',\n    description:\n      'Label next to the Esc keyboard shortcut in the DQL editor autocomplete info section, describing the action the shortcut triggers.',\n  },\n  dqlSyntaxLink: {\n    defaultMessage: 'DQL syntax',\n    id: 'anCkyfyzovTz3qtv',\n    description:\n      'Link text in the DQL editor autocomplete info section, pointing to the external DQL syntax documentation.',\n  },\n});\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,oBAAoB,eAAe;AAAA,EAC9C,WAAW;AAAA,IACT,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,YAAY;AAAA,IACV,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,eAAe;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AACF,CAAC;",
+  "names": []
+}

package/esm/editors/dql-editor/dql/suggestions-info-section-extension.js

@@ -0,0 +1,98 @@
+import { completionStatus } from "@codemirror/autocomplete";
+import { EditorView, ViewPlugin } from "@codemirror/view";
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { IntlProvider } from "react-intl";
+import Borders from "@dynatrace/strato-design-tokens/borders";
+import BoxShadows from "@dynatrace/strato-design-tokens/box-shadows";
+import Colors from "@dynatrace/strato-design-tokens/colors";
+import Spacings from "@dynatrace/strato-design-tokens/spacings";
+import { SuggestionsInfoSection } from "./SuggestionsInfoSection.js";
+const SUGGESTIONS_INFO_ATTR = "data-dql-suggestions-info";
+function findTooltipElement() {
+  return document.querySelector(".cm-tooltip-autocomplete");
+}
+const suggestionsInfoSectionTheme = EditorView.baseTheme({
+  ".cm-tooltip.cm-tooltip-autocomplete": {
+    background: "transparent !important",
+    boxShadow: "none !important",
+    padding: "0 !important",
+    borderRadius: "0 !important",
+    display: "flex !important",
+    flexDirection: "column",
+    gap: Spacings.Size4,
+    // Override the fixed `width: 500px` from the base editor config with a
+    // responsive width, so the tooltip shrinks on narrow viewports. This is
+    // what allows the container query in `SuggestionsInfoSection.css.ts` to
+    // actually fire and reflow the info section to a column layout.
+    width: `min(500px, calc(100vw - ${Spacings.Size16}))`
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
+    background: Colors.Background.Surface.Default,
+    borderRadius: Borders.Radius.Surface.Subdued,
+    boxShadow: BoxShadows.Surface.Floating.Rest,
+    padding: `${Spacings.Size4} !important`,
+    flex: "0 1 auto",
+    minHeight: 0
+  },
+  // Pin the info section to the bottom regardless of DOM insertion order:
+  // CodeMirror sometimes appends new children (e.g. the rebuilt `ul`) after our
+  // section, leaving it visually above the suggestions. Setting a higher `order`
+  // value forces flex to render it last while the `ul` keeps the default 0.
+  [`.cm-tooltip.cm-tooltip-autocomplete > [${SUGGESTIONS_INFO_ATTR}]`]: {
+    order: 1
+  }
+});
+const suggestionsInfoSectionPlugin = ViewPlugin.fromClass(
+  class {
+    container = null;
+    root = null;
+    update(update) {
+      const status = completionStatus(update.state);
+      if (status === null) {
+        this.unmount();
+        return;
+      }
+      queueMicrotask(() => {
+        if (this.container?.isConnected) {
+          return;
+        }
+        this.unmount();
+        const tooltipEl = findTooltipElement();
+        if (tooltipEl) {
+          this.mount(tooltipEl);
+        }
+      });
+    }
+    mount(tooltipEl) {
+      this.container = document.createElement("div");
+      this.container.setAttribute(SUGGESTIONS_INFO_ATTR, "");
+      tooltipEl.appendChild(this.container);
+      this.root = createRoot(this.container);
+      this.root.render(
+        createElement(
+          IntlProvider,
+          { locale: "en", defaultLocale: "en", messages: {} },
+          createElement(SuggestionsInfoSection)
+        )
+      );
+    }
+    unmount() {
+      this.root?.unmount();
+      this.root = null;
+      this.container?.remove();
+      this.container = null;
+    }
+    destroy() {
+      this.unmount();
+    }
+  }
+);
+const suggestionsInfoSectionExtension = [
+  suggestionsInfoSectionTheme,
+  suggestionsInfoSectionPlugin
+];
+export {
+  suggestionsInfoSectionExtension
+};
+//# sourceMappingURL=suggestions-info-section-extension.js.map

package/esm/editors/dql-editor/dql/suggestions-info-section-extension.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/editors/dql-editor/dql/suggestions-info-section-extension.ts"],
+  "sourcesContent": ["import { completionStatus } from '@codemirror/autocomplete';\nimport { EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';\nimport { createElement } from 'react';\nimport { createRoot, Root } from 'react-dom/client';\nimport { IntlProvider } from 'react-intl';\n\nimport Borders from '@dynatrace/strato-design-tokens/borders';\nimport BoxShadows from '@dynatrace/strato-design-tokens/box-shadows';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport { SuggestionsInfoSection } from './SuggestionsInfoSection.js';\n\nconst SUGGESTIONS_INFO_ATTR = 'data-dql-suggestions-info';\n\nfunction findTooltipElement(): HTMLElement | null {\n  return document.querySelector<HTMLElement>('.cm-tooltip-autocomplete');\n}\n\n// Strips the floating-box styling from the autocomplete tooltip container and\n// reapplies it to the suggestion list (`ul`) so the suggestion list and the\n// info section render as two visually independent floating boxes with a gap.\nconst suggestionsInfoSectionTheme = EditorView.baseTheme({\n  '.cm-tooltip.cm-tooltip-autocomplete': {\n    background: 'transparent !important',\n    boxShadow: 'none !important',\n    padding: '0 !important',\n    borderRadius: '0 !important',\n    display: 'flex !important',\n    flexDirection: 'column',\n    gap: Spacings.Size4,\n    // Override the fixed `width: 500px` from the base editor config with a\n    // responsive width, so the tooltip shrinks on narrow viewports. This is\n    // what allows the container query in `SuggestionsInfoSection.css.ts` to\n    // actually fire and reflow the info section to a column layout.\n    width: `min(500px, calc(100vw - ${Spacings.Size16}))`,\n  },\n  '.cm-tooltip.cm-tooltip-autocomplete > ul': {\n    background: Colors.Background.Surface.Default,\n    borderRadius: Borders.Radius.Surface.Subdued,\n    boxShadow: BoxShadows.Surface.Floating.Rest,\n    padding: `${Spacings.Size4} !important`,\n    flex: '0 1 auto',\n    minHeight: 0,\n  },\n  // Pin the info section to the bottom regardless of DOM insertion order:\n  // CodeMirror sometimes appends new children (e.g. the rebuilt `ul`) after our\n  // section, leaving it visually above the suggestions. Setting a higher `order`\n  // value forces flex to render it last while the `ul` keeps the default 0.\n  [`.cm-tooltip.cm-tooltip-autocomplete > [${SUGGESTIONS_INFO_ATTR}]`]: {\n    order: 1,\n  },\n});\n\nconst suggestionsInfoSectionPlugin = ViewPlugin.fromClass(\n  class {\n    private container: HTMLElement | null = null;\n    private root: Root | null = null;\n\n    update(update: ViewUpdate) {\n      const status = completionStatus(update.state);\n\n      if (status === null) {\n        this.unmount();\n        return;\n      }\n\n      // Defer to ensure CodeMirror has finished creating the tooltip DOM.\n      queueMicrotask(() => {\n        if (this.container?.isConnected) {\n          return;\n        }\n        this.unmount();\n\n        const tooltipEl = findTooltipElement();\n        if (tooltipEl) {\n          this.mount(tooltipEl);\n        }\n      });\n    }\n\n    private mount(tooltipEl: HTMLElement) {\n      this.container = document.createElement('div');\n      this.container.setAttribute(SUGGESTIONS_INFO_ATTR, '');\n      tooltipEl.appendChild(this.container);\n\n      this.root = createRoot(this.container);\n      this.root.render(\n        createElement(\n          IntlProvider,\n          { locale: 'en', defaultLocale: 'en', messages: {} },\n          createElement(SuggestionsInfoSection),\n        ),\n      );\n    }\n\n    private unmount() {\n      this.root?.unmount();\n      this.root = null;\n      this.container?.remove();\n      this.container = null;\n    }\n\n    destroy() {\n      this.unmount();\n    }\n  },\n);\n\nexport const suggestionsInfoSectionExtension = [\n  suggestionsInfoSectionTheme,\n  suggestionsInfoSectionPlugin,\n];\n"],
+  "mappings": "AAAA,SAAS,wBAAwB;AACjC,SAAS,YAAY,kBAA8B;AACnD,SAAS,qBAAqB;AAC9B,SAAS,kBAAwB;AACjC,SAAS,oBAAoB;AAE7B,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,OAAO,YAAY;AACnB,OAAO,cAAc;AAErB,SAAS,8BAA8B;AAEvC,MAAM,wBAAwB;AAE9B,SAAS,qBAAyC;AAChD,SAAO,SAAS,cAA2B,0BAA0B;AACvE;AAKA,MAAM,8BAA8B,WAAW,UAAU;AAAA,EACvD,uCAAuC;AAAA,IACrC,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAc;AAAA,IACd,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKd,OAAO,2BAA2B,SAAS,MAAM;AAAA,EACnD;AAAA,EACA,4CAA4C;AAAA,IAC1C,YAAY,OAAO,WAAW,QAAQ;AAAA,IACtC,cAAc,QAAQ,OAAO,QAAQ;AAAA,IACrC,WAAW,WAAW,QAAQ,SAAS;AAAA,IACvC,SAAS,GAAG,SAAS,KAAK;AAAA,IAC1B,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,CAAC,0CAA0C,qBAAqB,GAAG,GAAG;AAAA,IACpE,OAAO;AAAA,EACT;AACF,CAAC;AAED,MAAM,+BAA+B,WAAW;AAAA,EAC9C,MAAM;AAAA,IACI,YAAgC;AAAA,IAChC,OAAoB;AAAA,IAE5B,OAAO,QAAoB;AACzB,YAAM,SAAS,iBAAiB,OAAO,KAAK;AAE5C,UAAI,WAAW,MAAM;AACnB,aAAK,QAAQ;AACb;AAAA,MACF;AAGA,qBAAe,MAAM;AACnB,YAAI,KAAK,WAAW,aAAa;AAC/B;AAAA,QACF;AACA,aAAK,QAAQ;AAEb,cAAM,YAAY,mBAAmB;AACrC,YAAI,WAAW;AACb,eAAK,MAAM,SAAS;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEQ,MAAM,WAAwB;AACpC,WAAK,YAAY,SAAS,cAAc,KAAK;AAC7C,WAAK,UAAU,aAAa,uBAAuB,EAAE;AACrD,gBAAU,YAAY,KAAK,SAAS;AAEpC,WAAK,OAAO,WAAW,KAAK,SAAS;AACrC,WAAK,KAAK;AAAA,QACR;AAAA,UACE;AAAA,UACA,EAAE,QAAQ,MAAM,eAAe,MAAM,UAAU,CAAC,EAAE;AAAA,UAClD,cAAc,sBAAsB;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,IAEQ,UAAU;AAChB,WAAK,MAAM,QAAQ;AACnB,WAAK,OAAO;AACZ,WAAK,WAAW,OAAO;AACvB,WAAK,YAAY;AAAA,IACnB;AAAA,IAEA,UAAU;AACR,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AACF;AAEO,MAAM,kCAAkC;AAAA,EAC7C;AAAA,EACA;AACF;",
+  "names": []
+}

package/esm/editors/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/editors/index.ts"],
-  "sourcesContent": ["export { BaseCodeEditor as _BaseCodeEditor } from './base-code-editor/BaseCodeEditor.js';\nexport type {\n  BaseCodeEditorProps as _BaseCodeEditorProps,\n  BaseCodeEditorRef as _BaseCodeEditorRef,\n} from './base-code-editor/BaseCodeEditor.js';\nexport type {\n  AutocompleteProvider as _AutocompleteProvider,\n  AutocompletionResult as _AutocompletionResult,\n  Suggestion as _Suggestion,\n} from './base-code-editor/auto-completion/autocompletion.extension.js';\nexport type { ListAutocompletionConfig as _ListAutocompletionConfig } from './base-code-editor/auto-completion/list/list-autocompletion-types.js';\nexport type {\n  AutocompletionOptions as _AutocompletionOptions,\n  EditorLanguageConfiguration as _EditorLanguageConfiguration,\n} from './base-code-editor/configuration/configuration.js';\nexport { getAutocompleteExtensions as _getAutocompleteExtensions } from './base-code-editor/configuration/language-extensions.js';\nexport type { GutterConfiguration } from './base-code-editor/configuration/getDefaultConfigurations.js';\nexport type { IntlProps as _IntlProps } from './base-code-editor/utils/render-node.js';\nexport { CodeEditor } from './code-editor/CodeEditor.js';\nexport type {\n  CodeEditorProps,\n  CodeEditorRef,\n} from './code-editor/CodeEditor.js';\nexport { codeEditorLanguages as _codeEditorLanguages } from './code-editor/languages/languages.js';\nexport { DQLEditor } from './dql-editor/DQLEditor.js';\nexport type { DQLEditorValidityInfo } from './dql-editor/dql-editor-types.js';\nexport type { DQLEditorProps, DQLEditorRef } from './dql-editor/DQLEditor.js';\nexport { getDqlConfig as _getDqlConfig } from './dql-editor/dql/dql-language.js';\nexport { useValidityInfo as _useValidityInfo } from './dql-editor/useValidityInfo.js';\n"],
-  "mappings": "AAAA,SAA2B,sBAAuB;AAelD,SAAsC,iCAAkC;AAGxE,SAAS,kBAAkB;AAK3B,SAAgC,2BAA4B;AAC5D,SAAS,iBAAiB;AAG1B,SAAyB,oBAAqB;AAC9C,SAA4B,uBAAwB;",
+  "sourcesContent": ["export { BaseCodeEditor as _BaseCodeEditor } from './base-code-editor/BaseCodeEditor.js';\nexport type {\n  BaseCodeEditorBaseProps as _BaseCodeEditorBaseProps,\n  BaseCodeEditorControlledProps as _BaseCodeEditorControlledProps,\n  BaseCodeEditorProps as _BaseCodeEditorProps,\n  BaseCodeEditorRef as _BaseCodeEditorRef,\n  BaseCodeEditorUncontrolledProps as _BaseCodeEditorUncontrolledProps,\n} from './base-code-editor/BaseCodeEditor.js';\nexport type {\n  AutocompleteProvider as _AutocompleteProvider,\n  AutocompletionResult as _AutocompletionResult,\n  Suggestion as _Suggestion,\n} from './base-code-editor/auto-completion/autocompletion.extension.js';\nexport type { ListAutocompletionConfig as _ListAutocompletionConfig } from './base-code-editor/auto-completion/list/list-autocompletion-types.js';\nexport type {\n  AutocompletionOptions as _AutocompletionOptions,\n  EditorLanguageConfiguration as _EditorLanguageConfiguration,\n} from './base-code-editor/configuration/configuration.js';\nexport { getAutocompleteExtensions as _getAutocompleteExtensions } from './base-code-editor/configuration/language-extensions.js';\nexport type { GutterConfiguration } from './base-code-editor/configuration/getDefaultConfigurations.js';\nexport type { IntlProps as _IntlProps } from './base-code-editor/utils/render-node.js';\nexport { CodeEditor } from './code-editor/CodeEditor.js';\nexport type {\n  CodeEditorBaseProps,\n  CodeEditorControlledProps,\n  CodeEditorProps,\n  CodeEditorRef,\n  CodeEditorUncontrolledProps,\n} from './code-editor/CodeEditor.js';\nexport { codeEditorLanguages as _codeEditorLanguages } from './code-editor/languages/languages.js';\nexport { DQLEditor } from './dql-editor/DQLEditor.js';\nexport type { DQLEditorValidityInfo } from './dql-editor/dql-editor-types.js';\nexport type {\n  DQLEditorBaseProps,\n  DQLEditorControlledProps,\n  DQLEditorProps,\n  DQLEditorRef,\n  DQLEditorUncontrolledProps,\n} from './dql-editor/DQLEditor.js';\nexport { getDqlConfig as _getDqlConfig } from './dql-editor/dql/dql-language.js';\nexport { useValidityInfo as _useValidityInfo } from './dql-editor/useValidityInfo.js';\n"],
+  "mappings": "AAAA,SAA2B,sBAAuB;AAkBlD,SAAsC,iCAAkC;AAGxE,SAAS,kBAAkB;AAQ3B,SAAgC,2BAA4B;AAC5D,SAAS,iBAAiB;AAS1B,SAAyB,oBAAqB;AAC9C,SAA4B,uBAAwB;",
   "names": []
 }

package/esm/filters/filter/MoreMenu.js

@@ -11,8 +11,8 @@ import { Item } from "./Item.js";
 import { FilterBarActions } from "./types/filter-state.types.js";
 import { getTextFromNode } from "./utils/getTextFromNode.js";
 import { Button } from "../../buttons/button/Button.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useId } from "../../core/hooks/useId.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
 import { isSlot } from "../../core/utils/is-slot.js";
 import { Select } from "../../forms/select/Select.js";
 import { Flex } from "../../layouts/flex/Flex.js";

package/esm/filters/filter/MoreMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/filter/MoreMenu.tsx"],
-  "sourcesContent": ["import {\n  type ReactNode,\n  useMemo,\n  useRef,\n  Children,\n  type ReactElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { useFilterBarContext } from './hooks/useFilterBarContext.js';\nimport { Item } from './Item.js';\nimport { FilterBarActions } from './types/filter-state.types.js';\nimport { getTextFromNode } from './utils/getTextFromNode.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Select } from '../../forms/select/Select.js';\nimport { SelectMultiValue } from '../../forms/select/types.js';\nimport { FormControlWithOverlayRef } from '../../forms/shared-types.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\ntype MoreMenuProps = {\n  children: ReactNode[];\n};\n\n/**\n * The moreMenu allows to hide and show further filters. All filterBar.Items inside are hidden initially.\n * @internal\n */\nexport const MoreMenu = ({ children }: MoreMenuProps) => {\n  const intl = useIntl();\n  const label = intl.formatMessage({\n    defaultMessage: 'Add filter',\n    id: '+BUznwQEJTiILiAa',\n    description:\n      'Message to display by default for adding more Filters to the FilterBar.',\n  });\n\n  const { focusClassName, focusProps } = useFocusRing({\n    color: 'neutral',\n    focusWithin: true,\n    ignoreModality: true,\n  });\n\n  const { dispatch, setLastAddedItem, state } = useFilterBarContext(),\n    { itemsPinnedState } = state;\n\n  const selectRef = useRef<FormControlWithOverlayRef | null>(null);\n\n  const allPinnableFilters = useMemo<\n    Record<string, { elem: ReactElement; label: string }>\n  >(() => {\n    const temp: Record<string, { elem: ReactElement; label: string }> = {};\n    for (const child of Children.toArray(children)) {\n      if (isSlot(child, Item)) {\n        const uniqueName: string = child.props.name;\n        temp[uniqueName] = {\n          elem: child,\n          label: getTextFromNode(child.props.label, intl, uniqueName),\n        };\n      }\n    }\n    return temp;\n  }, [children, intl]);\n\n  const optionalPinnedItems = useMemo(\n    () =>\n      Object.entries(itemsPinnedState || {}).reduce((keys, [key, value]) => {\n        if (value === 'pinned-optional') {\n          keys.push(key);\n        }\n        return keys;\n      }, [] as Array<string | number>),\n    [itemsPinnedState],\n  );\n\n  const handleSelectChange = (newValues: SelectMultiValue<string | number>) => {\n    setLastAddedItem(null);\n\n    const union = new Set([\n      ...(newValues ?? []),\n      ...(optionalPinnedItems || []),\n    ]);\n\n    // Check for newly selected items and pin those\n    if (\n      !optionalPinnedItems ||\n      (newValues && optionalPinnedItems.length < newValues.length)\n    ) {\n      const filtersToPin = [...union].filter(\n        (key) => !optionalPinnedItems?.includes(key),\n      );\n\n      selectRef?.current?.close();\n      filtersToPin?.length && setLastAddedItem(filtersToPin[0]?.toString());\n\n      dispatch({\n        type: FilterBarActions.PIN,\n        payload: {\n          keys: filtersToPin,\n        },\n      });\n\n      return;\n    }\n\n    // Check for newly unselected items and unpin those\n    if (!newValues) {\n      dispatch({\n        type: FilterBarActions.UNPIN,\n        payload: {\n          keys: optionalPinnedItems ?? [],\n        },\n      });\n    } else if (\n      optionalPinnedItems &&\n      optionalPinnedItems.length > newValues.length\n    ) {\n      const keys = [...union].filter((key) => !newValues?.includes(key));\n\n      dispatch({\n        type: FilterBarActions.UNPIN,\n        payload: { keys },\n      });\n    }\n  };\n\n  const labelId = useId();\n\n  return (\n    <>\n      {optionalPinnedItems.map(\n        (key) =>\n          allPinnableFilters[key] && (\n            <Flex key={key} gap={2} alignItems=\"flex-end\">\n              {allPinnableFilters[key].elem}\n            </Flex>\n          ),\n      )}\n      <div style={{ maxWidth: '100%' }} {...focusProps}>\n        <Select\n          value={optionalPinnedItems}\n          onChange={handleSelectChange}\n          id=\"user-select\"\n          multiple={true}\n          clearable\n          ref={selectRef}\n          data-dt-name=\"AddFilter\"\n        >\n          <Select.CustomTrigger>\n            <Button as=\"div\" id={labelId} className={focusClassName}>\n              {label}\n              <Button.Suffix>\n                <ChevronDownSmallIcon />\n              </Button.Suffix>\n            </Button>\n          </Select.CustomTrigger>\n          <Select.Content width=\"fit-content\">\n            <Select.Filter />\n            {Object.keys(allPinnableFilters).map((key) => (\n              <Select.Option value={key} key={key}>\n                {allPinnableFilters[key].label}\n              </Select.Option>\n            ))}\n          </Select.Content>\n        </Select>\n      </div>\n    </>\n  );\n};\n\n(MoreMenu as typeof MoreMenu & { displayName: string }).displayName =\n  'FilterBar.MoreMenu';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type ReactNode,\n  useMemo,\n  useRef,\n  Children,\n  type ReactElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { useFilterBarContext } from './hooks/useFilterBarContext.js';\nimport { Item } from './Item.js';\nimport { FilterBarActions } from './types/filter-state.types.js';\nimport { getTextFromNode } from './utils/getTextFromNode.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Select } from '../../forms/select/Select.js';\nimport { SelectMultiValue } from '../../forms/select/types.js';\nimport { FormControlWithOverlayRef } from '../../forms/shared-types.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\ntype MoreMenuProps = {\n  children: ReactNode[];\n};\n\n/**\n * The moreMenu allows to hide and show further filters. All filterBar.Items inside are hidden initially.\n * @internal\n */\nexport const MoreMenu = ({ children }: MoreMenuProps) => {\n  const intl = useIntl();\n  const label = intl.formatMessage({\n    defaultMessage: 'Add filter',\n    id: '+BUznwQEJTiILiAa',\n    description:\n      'Message to display by default for adding more Filters to the FilterBar.',\n  });\n\n  const { focusClassName, focusProps } = useFocusRing({\n    color: 'neutral',\n    focusWithin: true,\n    ignoreModality: true,\n  });\n\n  const { dispatch, setLastAddedItem, state } = useFilterBarContext(),\n    { itemsPinnedState } = state;\n\n  const selectRef = useRef<FormControlWithOverlayRef | null>(null);\n\n  const allPinnableFilters = useMemo<\n    Record<string, { elem: ReactElement; label: string }>\n  >(() => {\n    const temp: Record<string, { elem: ReactElement; label: string }> = {};\n    for (const child of Children.toArray(children)) {\n      if (isSlot(child, Item)) {\n        const uniqueName: string = child.props.name;\n        temp[uniqueName] = {\n          elem: child,\n          label: getTextFromNode(child.props.label, intl, uniqueName),\n        };\n      }\n    }\n    return temp;\n  }, [children, intl]);\n\n  const optionalPinnedItems = useMemo(\n    () =>\n      Object.entries(itemsPinnedState || {}).reduce((keys, [key, value]) => {\n        if (value === 'pinned-optional') {\n          keys.push(key);\n        }\n        return keys;\n      }, [] as Array<string | number>),\n    [itemsPinnedState],\n  );\n\n  const handleSelectChange = (newValues: SelectMultiValue<string | number>) => {\n    setLastAddedItem(null);\n\n    const union = new Set([\n      ...(newValues ?? []),\n      ...(optionalPinnedItems || []),\n    ]);\n\n    // Check for newly selected items and pin those\n    if (\n      !optionalPinnedItems ||\n      (newValues && optionalPinnedItems.length < newValues.length)\n    ) {\n      const filtersToPin = [...union].filter(\n        (key) => !optionalPinnedItems?.includes(key),\n      );\n\n      selectRef?.current?.close();\n      filtersToPin?.length && setLastAddedItem(filtersToPin[0]?.toString());\n\n      dispatch({\n        type: FilterBarActions.PIN,\n        payload: {\n          keys: filtersToPin,\n        },\n      });\n\n      return;\n    }\n\n    // Check for newly unselected items and unpin those\n    if (!newValues) {\n      dispatch({\n        type: FilterBarActions.UNPIN,\n        payload: {\n          keys: optionalPinnedItems ?? [],\n        },\n      });\n    } else if (\n      optionalPinnedItems &&\n      optionalPinnedItems.length > newValues.length\n    ) {\n      const keys = [...union].filter((key) => !newValues?.includes(key));\n\n      dispatch({\n        type: FilterBarActions.UNPIN,\n        payload: { keys },\n      });\n    }\n  };\n\n  const labelId = useId();\n\n  return (\n    <>\n      {optionalPinnedItems.map(\n        (key) =>\n          allPinnableFilters[key] && (\n            <Flex key={key} gap={2} alignItems=\"flex-end\">\n              {allPinnableFilters[key].elem}\n            </Flex>\n          ),\n      )}\n      <div style={{ maxWidth: '100%' }} {...focusProps}>\n        <Select\n          value={optionalPinnedItems}\n          onChange={handleSelectChange}\n          id=\"user-select\"\n          multiple={true}\n          clearable\n          ref={selectRef}\n          data-dt-name=\"AddFilter\"\n        >\n          <Select.CustomTrigger>\n            <Button as=\"div\" id={labelId} className={focusClassName}>\n              {label}\n              <Button.Suffix>\n                <ChevronDownSmallIcon />\n              </Button.Suffix>\n            </Button>\n          </Select.CustomTrigger>\n          <Select.Content width=\"fit-content\">\n            <Select.Filter />\n            {Object.keys(allPinnableFilters).map((key) => (\n              <Select.Option value={key} key={key}>\n                {allPinnableFilters[key].label}\n              </Select.Option>\n            ))}\n          </Select.Content>\n        </Select>\n      </div>\n    </>\n  );\n};\n\n(MoreMenu as typeof MoreMenu & { displayName: string }).displayName =\n  'FilterBar.MoreMenu';\n"],
+  "mappings": "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",
   "names": []
 }