@dynatrace/strato-components 3.3.3 → 3.5.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/dql/SuggestionPart.css.ts"],
-  "sourcesContent": ["import './SuggestionPart.css';\nexport var suggestionPartSectionInfoCSS = '_yhio8f0-3-3-3';"],
+  "sourcesContent": ["import './SuggestionPart.css';\nexport var suggestionPartSectionInfoCSS = '_yhio8f0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,+BAA+B;",
   "names": []
 }

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

@@ -1,51 +1,17 @@
 import { simpleMode } from "@codemirror/legacy-modes/mode/simple-mode";
-const dqlCommands = [
-  "aggregate",
-  "append",
-  "data",
-  "dedup",
-  "describe",
-  "expand",
-  "experimentalFieldsSummary",
-  "experimentalLoad",
-  "experimentalSave",
-  "experimentalTimeChart",
-  "failIf",
-  "fetch",
-  "fields",
-  "fieldsAdd",
-  "fieldsFlatten",
-  "fieldsKeep",
-  "fieldsRemove",
-  "fieldsRename",
-  "fieldsSnapshot",
-  "fieldsSummary",
-  "filter",
-  "filterOut",
-  "group",
-  "internalTimeseriesBins",
-  "join",
-  "joinNested",
-  "limit",
-  "load",
-  "lookup",
-  "makeTimeseries",
-  "parse",
-  "search",
-  "smartscapeEdges",
-  "smartscapeNodes",
-  "sort",
-  "summarize",
-  "timeseries",
-  "traverse"
-];
-const sortedDqlCommands = dqlCommands.toSorted((a, b) => b.length - a.length);
+import {
+  booleanLiteralPattern,
+  dqlUnitSuffixPattern,
+  parameterNamePattern,
+  sortedDqlCommands
+} from "../../../core/dql/dql-common.js";
 const tokenMapping = {
   command: "keyword",
   comment: "comment",
   parameter: "variableName",
   string: "string",
-  number: "number"
+  number: "number",
+  bool: "bool"
 };
 const startComment = [
   { regex: /\/\/.*/, token: tokenMapping.comment },
@@ -57,7 +23,10 @@ const dql = simpleMode({
   start: [
     ...startComment,
     {
-      regex: new RegExp(`(\\s*)((?:${sortedDqlCommands.join("|")})\\s*)`, "i"),
+      regex: new RegExp(
+        `(\\s*)((?:${sortedDqlCommands.join("|")})\\b\\s*)`,
+        "i"
+      ),
       token: ["", tokenMapping.command],
       next: "parameters"
     },
@@ -75,15 +44,18 @@ const dql = simpleMode({
   ],
   parameters: [
     ...startComment,
-    { regex: /\w+\s*(?=:)/, token: tokenMapping.parameter },
+    { regex: parameterNamePattern, token: tokenMapping.parameter },
     // parameter, eg: scanLimitGb:
+    { regex: booleanLiteralPattern, token: tokenMapping.bool },
+    // boolean literals (true/false)
     { regex: /[A-Za-z\]]+[A-Za-z_.0-9]+/ },
     // identifier, eg: runs_on or metricsJson
     { regex: /"""/, token: tokenMapping.string, push: "tripleQuoteString" },
     { regex: /"/, token: tokenMapping.string, push: "doubleQuoteString" },
     { regex: /`/, token: tokenMapping.string, push: "backtickString" },
     {
-      regex: /(\d+(?:\.\d+)?)(?![.\w])/,
+      regex: new RegExp(`(\\d+(?:\\.\\d+)?${dqlUnitSuffixPattern}?)(?![.\\w])`),
+      // Match numbers with optional unit suffix
       token: tokenMapping.number
     },
     {
@@ -124,7 +96,6 @@ const dql = simpleMode({
   }
 });
 export {
-  dql,
-  dqlCommands
+  dql
 };
 //# sourceMappingURL=dql.js.map

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\n// Taken from the latest dql release in the artifactory\n// Exported only for tests\nexport const dqlCommands = [\n  'aggregate',\n  'append',\n  'data',\n  'dedup',\n  'describe',\n  'expand',\n  'experimentalFieldsSummary',\n  'experimentalLoad',\n  'experimentalSave',\n  'experimentalTimeChart',\n  'failIf',\n  'fetch',\n  'fields',\n  'fieldsAdd',\n  'fieldsFlatten',\n  'fieldsKeep',\n  'fieldsRemove',\n  'fieldsRename',\n  'fieldsSnapshot',\n  'fieldsSummary',\n  'filter',\n  'filterOut',\n  'group',\n  'internalTimeseriesBins',\n  'join',\n  'joinNested',\n  'limit',\n  'load',\n  'lookup',\n  'makeTimeseries',\n  'parse',\n  'search',\n  'smartscapeEdges',\n  'smartscapeNodes',\n  'sort',\n  'summarize',\n  'timeseries',\n  'traverse',\n];\n\n// The commands need to be sorted by length. Longer names should be at the start of the list\n// If `fields` comes before `fieldsAdd` in the array we would match `fieldsAdd` as `fields` without `Add`\n// We cannot rely on a empty space after a command either. `fetch/* comment */logs` should match `fetch`\nconst sortedDqlCommands = dqlCommands.toSorted((a, b) => b.length - a.length);\n\nconst tokenMapping = {\n  command: 'keyword',\n  comment: 'comment',\n  parameter: 'variableName',\n  string: 'string',\n  number: 'number',\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(`(\\\\s*)((?:${sortedDqlCommands.join('|')})\\\\s*)`, 'i'),\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: /\\w+\\s*(?=:)/, token: tokenMapping.parameter }, // parameter, eg: scanLimitGb:\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: /(\\d+(?:\\.\\d+)?)(?![.\\w])/,\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": "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",
+  "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;",
   "names": []
 }

package/esm/editors/dql-editor/dql/open-autocomplete.js

@@ -1,7 +1,21 @@
 import { CompletionContext } from "@codemirror/autocomplete";
 import { verifyQuery } from "./dql-linter.js";
 function isStartOfCommandOrParameter(context) {
-  return context.matchBefore(/[,|]\s+$/);
+  return context.matchBefore(/[,|]\s+$/) !== null;
+}
+function isTypingCommandPrefixAtCommandBoundary(context) {
+  return context.matchBefore(/(?:^|[|,]\s*)[A-Za-z][A-Za-z0-9]*$/) !== null;
+}
+function isTypingParameterPrefixAfterCommand(context) {
+  const commandAndParameter = context.matchBefore(
+    /^[A-Za-z][A-Za-z0-9]*\s+[A-Za-z_][A-Za-z0-9_.]*\s*$/
+  );
+  return commandAndParameter !== null;
+}
+function isBeforeCommentOrEndOfContent(state) {
+  const afterCursor = state.doc.slice(state.selection.main.to).toString();
+  const afterCursorTrimmed = afterCursor.trimStart();
+  return afterCursorTrimmed === "" || afterCursorTrimmed.startsWith("//") || afterCursorTrimmed.startsWith("/*");
 }
 async function isInvalidAtEnd(query) {
   const trimmedQuery = query.trimEnd();
@@ -14,10 +28,16 @@ async function isInvalidAtEnd(query) {
 async function openAutocomplete(update, state) {
   const { isTyping, isDeleting, isFocused, selectionChanged } = update;
   const context = new CompletionContext(state, state.selection.main.to, false);
+  if (isTyping && (isTypingCommandPrefixAtCommandBoundary(context) || isTypingParameterPrefixAfterCommand(context)) && isBeforeCommentOrEndOfContent(state)) {
+    return true;
+  }
   if (selectionChanged || isFocused) {
     const fullContent = state.doc.toString();
     const cursorAtTheEnd = fullContent.length === state.selection.ranges[0].to;
-    if (fullContent.trim() === "" || cursorAtTheEnd && isStartOfCommandOrParameter(context)) {
+    const cursorPosition = state.selection.main.to;
+    const textBeforeCursor = state.doc.slice(0, cursorPosition).toString();
+    const isOnFreshLine = context.matchBefore(/^\s*$/) !== null && textBeforeCursor.trim() !== "";
+    if (fullContent.trim() === "" || cursorAtTheEnd && isStartOfCommandOrParameter(context) || isOnFreshLine) {
       return true;
     }
   }
@@ -35,8 +55,8 @@ async function openAutocomplete(update, state) {
     }
   }
   const characterAfter = state.doc.slice(state.selection.main.to, state.selection.main.to + 1).toString();
-  const hasSpaceOrEOFAfter = characterAfter.trim().length === 0;
-  if (isDeleting && hasSpaceOrEOFAfter) {
+  const hasSpaceOrEndOfContentAfter = characterAfter.trim().length === 0;
+  if (isDeleting && hasSpaceOrEndOfContentAfter) {
     return true;
   }
   return false;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/dql/open-autocomplete.ts"],
-  "sourcesContent": ["import { CompletionContext } from '@codemirror/autocomplete';\nimport { EditorState } from '@codemirror/state';\n\nimport { verifyQuery } from './dql-linter.js';\n\nfunction isStartOfCommandOrParameter(context: CompletionContext) {\n  return context.matchBefore(/[,|]\\s+$/);\n}\n\nexport async function isInvalidAtEnd(query: string) {\n  const trimmedQuery = query.trimEnd();\n  const { valid = true, notifications = [] } =\n    (await verifyQuery(trimmedQuery)) ?? {};\n\n  const hasErrorNotificationAtEnd = notifications?.some(\n    (notification) =>\n      notification.severity === 'ERROR' &&\n      notification.syntaxPosition?.end.index === trimmedQuery.length - 1,\n  );\n\n  return !valid && hasErrorNotificationAtEnd;\n}\n\n/**\n * Function that detemines if the autocomplete dropdown should be opened\n *\n * @param update - Information on the current changes from the update listener\n * @param state - EditorState\n * @returns true when the autocomplete should be opened\n */\nexport async function openAutocomplete(\n  update: {\n    isTyping: boolean;\n    isDeleting: boolean;\n    isFocused: boolean;\n    selectionChanged: boolean;\n  },\n  state: EditorState,\n): Promise<boolean> {\n  const { isTyping, isDeleting, isFocused, selectionChanged } = update;\n\n  const context = new CompletionContext(state, state.selection.main.to, false);\n\n  // open autocomplete when content is empty\n  // or cursor is at the very end following a comma or pipe\n  if (selectionChanged || isFocused) {\n    const fullContent = state.doc.toString();\n    const cursorAtTheEnd = fullContent.length === state.selection.ranges[0].to;\n\n    if (\n      fullContent.trim() === '' ||\n      (cursorAtTheEnd && isStartOfCommandOrParameter(context))\n    ) {\n      return true;\n    }\n  }\n\n  const hasWhitespaceBefore = context.matchBefore(/\\s/);\n\n  // open autocomplete when the user is typing following a command (==keyword)\n  if (\n    (isTyping || isDeleting) &&\n    context.tokenBefore(['keyword']) &&\n    hasWhitespaceBefore\n  ) {\n    return true;\n  }\n\n  // open autocomplete if the user is typing following a comma or pipe\n  if (isTyping && isStartOfCommandOrParameter(context)) {\n    return true;\n  }\n\n  // open autocomplete if query is invalid and a space was typed beforehand\n  if (isTyping && hasWhitespaceBefore) {\n    const query = state.doc.slice(0, state.selection.main.to).toString();\n    if (await isInvalidAtEnd(query)) {\n      return true;\n    }\n  }\n\n  const characterAfter = state.doc\n    .slice(state.selection.main.to, state.selection.main.to + 1)\n    .toString();\n  const hasSpaceOrEOFAfter = characterAfter.trim().length === 0;\n\n  // open autocomplete if\n  //  - a whitespace was deleted\n  //  - the last char was deleted\n  if (isDeleting && hasSpaceOrEOFAfter) {\n    return true;\n  }\n\n  return false;\n}\n"],
-  "mappings": "AAAA,SAAS,yBAAyB;AAGlC,SAAS,mBAAmB;AAE5B,SAAS,4BAA4B,SAA4B;AAC/D,SAAO,QAAQ,YAAY,UAAU;AACvC;AAEA,eAAsB,eAAe,OAAe;AAClD,QAAM,eAAe,MAAM,QAAQ;AACnC,QAAM,EAAE,QAAQ,MAAM,gBAAgB,CAAC,EAAE,IACtC,MAAM,YAAY,YAAY,KAAM,CAAC;AAExC,QAAM,4BAA4B,eAAe;AAAA,IAC/C,CAAC,iBACC,aAAa,aAAa,WAC1B,aAAa,gBAAgB,IAAI,UAAU,aAAa,SAAS;AAAA,EACrE;AAEA,SAAO,CAAC,SAAS;AACnB;AASA,eAAsB,iBACpB,QAMA,OACkB;AAClB,QAAM,EAAE,UAAU,YAAY,WAAW,iBAAiB,IAAI;AAE9D,QAAM,UAAU,IAAI,kBAAkB,OAAO,MAAM,UAAU,KAAK,IAAI,KAAK;AAI3E,MAAI,oBAAoB,WAAW;AACjC,UAAM,cAAc,MAAM,IAAI,SAAS;AACvC,UAAM,iBAAiB,YAAY,WAAW,MAAM,UAAU,OAAO,CAAC,EAAE;AAExE,QACE,YAAY,KAAK,MAAM,MACtB,kBAAkB,4BAA4B,OAAO,GACtD;AACA,aAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,sBAAsB,QAAQ,YAAY,IAAI;AAGpD,OACG,YAAY,eACb,QAAQ,YAAY,CAAC,SAAS,CAAC,KAC/B,qBACA;AACA,WAAO;AAAA,EACT;AAGA,MAAI,YAAY,4BAA4B,OAAO,GAAG;AACpD,WAAO;AAAA,EACT;AAGA,MAAI,YAAY,qBAAqB;AACnC,UAAM,QAAQ,MAAM,IAAI,MAAM,GAAG,MAAM,UAAU,KAAK,EAAE,EAAE,SAAS;AACnE,QAAI,MAAM,eAAe,KAAK,GAAG;AAC/B,aAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,iBAAiB,MAAM,IAC1B,MAAM,MAAM,UAAU,KAAK,IAAI,MAAM,UAAU,KAAK,KAAK,CAAC,EAC1D,SAAS;AACZ,QAAM,qBAAqB,eAAe,KAAK,EAAE,WAAW;AAK5D,MAAI,cAAc,oBAAoB;AACpC,WAAO;AAAA,EACT;AAEA,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable tsdoc/syntax */\nimport { CompletionContext } from '@codemirror/autocomplete';\nimport { EditorState } from '@codemirror/state';\n\nimport { verifyQuery } from './dql-linter.js';\n\n/**\n * Checks whether the cursor is at a position where a command or parameter is expected,\n * following a comma or pipe separator, with only whitespace in between.\n * @param context - the current completion context\n * @returns true if the cursor is at the start of a command or parameter, false otherwise\n */\nfunction isStartOfCommandOrParameter(context: CompletionContext): boolean {\n  return context.matchBefore(/[,|]\\s+$/) !== null;\n}\n\n/**\n * Checks whether the user is typing a command prefix (e.g. `d`, `da`, `fet`)\n * at a valid command boundary: start of query or after a `|` or `,` separator.\n * Unlike isStartOfCommandOrParameter, this also matches once characters have\n * been typed after the separator (e.g. `fetch logs | d`, `fetch logs | de`),\n * which is needed for reopening suggestions after ESC and continued typing.\n * @param context - the current completion context\n * @returns true if the user is typing a command prefix at a valid command boundary, false otherwise\n */\nfunction isTypingCommandPrefixAtCommandBoundary(\n  context: CompletionContext,\n): boolean {\n  return context.matchBefore(/(?:^|[|,]\\s*)[A-Za-z][A-Za-z0-9]*$/) !== null;\n}\n\n/**\n * Checks whether the user is typing a parameter prefix after a command.\n * This covers reopening suggestions after ESC when typing continues within\n * the first parameter token at query start, for example\n * `fetch app` -> `fetch appl`.\n * @param context - the current completion context\n * @returns true if the user is typing a parameter prefix after a command, false otherwise\n */\nfunction isTypingParameterPrefixAfterCommand(\n  context: CompletionContext,\n): boolean {\n  const commandAndParameter = context.matchBefore(\n    /^[A-Za-z][A-Za-z0-9]*\\s+[A-Za-z_][A-Za-z0-9_.]*\\s*$/,\n  );\n\n  return commandAndParameter !== null;\n}\n\n/**\n * Allows opening autocomplete when only whitespace, a comment, or no more\n * content follows the cursor. This covers typing before comments and reopening\n * suggestions after ESC when the user continues typing at the end of the query.\n */\nfunction isBeforeCommentOrEndOfContent(state: EditorState): boolean {\n  const afterCursor = state.doc.slice(state.selection.main.to).toString();\n  const afterCursorTrimmed = afterCursor.trimStart();\n\n  return (\n    afterCursorTrimmed === '' ||\n    afterCursorTrimmed.startsWith('//') ||\n    afterCursorTrimmed.startsWith('/*')\n  );\n}\n\n/**\n * Checks whether the query is invalid at the end.\n *\n * @param query - The query string to check\n * @returns A promise that resolves to true if the query is invalid at the end, false otherwise\n */\nexport async function isInvalidAtEnd(query: string): Promise<boolean> {\n  const trimmedQuery = query.trimEnd();\n  const { valid = true, notifications = [] } =\n    (await verifyQuery(trimmedQuery)) ?? {};\n\n  const hasErrorNotificationAtEnd = notifications?.some(\n    (notification) =>\n      notification.severity === 'ERROR' &&\n      notification.syntaxPosition?.end.index === trimmedQuery.length - 1,\n  );\n\n  return !valid && hasErrorNotificationAtEnd;\n}\n\n/**\n * Determines if the autocomplete dropdown should be opened.\n *\n * @param update - Information on the current changes from the update listener\n * @param state - EditorState\n * @returns true when the autocomplete should be opened\n */\nexport async function openAutocomplete(\n  update: {\n    isTyping: boolean;\n    isDeleting: boolean;\n    isFocused: boolean;\n    selectionChanged: boolean;\n  },\n  state: EditorState,\n): Promise<boolean> {\n  const { isTyping, isDeleting, isFocused, selectionChanged } = update;\n\n  const context = new CompletionContext(state, state.selection.main.to, false);\n\n  if (\n    isTyping &&\n    (isTypingCommandPrefixAtCommandBoundary(context) ||\n      isTypingParameterPrefixAfterCommand(context)) &&\n    isBeforeCommentOrEndOfContent(state)\n  ) {\n    return true;\n  }\n\n  // open autocomplete if\n  //  - content is empty\n  //  - the cursor is at the very end following a comma or pipe\n  //  - the cursor is on a fresh line after existing content\n  if (selectionChanged || isFocused) {\n    const fullContent = state.doc.toString();\n    const cursorAtTheEnd = fullContent.length === state.selection.ranges[0].to;\n    const cursorPosition = state.selection.main.to;\n    const textBeforeCursor = state.doc.slice(0, cursorPosition).toString();\n    const isOnFreshLine =\n      context.matchBefore(/^\\s*$/) !== null && textBeforeCursor.trim() !== '';\n\n    if (\n      fullContent.trim() === '' ||\n      (cursorAtTheEnd && isStartOfCommandOrParameter(context)) ||\n      isOnFreshLine\n    ) {\n      return true;\n    }\n  }\n\n  const hasWhitespaceBefore = context.matchBefore(/\\s/);\n\n  // open autocomplete when the user is typing following a command (==keyword)\n  if (\n    (isTyping || isDeleting) &&\n    context.tokenBefore(['keyword']) &&\n    hasWhitespaceBefore\n  ) {\n    return true;\n  }\n\n  // open autocomplete if the user is typing following a comma or pipe\n  if (isTyping && isStartOfCommandOrParameter(context)) {\n    return true;\n  }\n\n  // open autocomplete if query is invalid and a space was typed beforehand\n  if (isTyping && hasWhitespaceBefore) {\n    const query = state.doc.slice(0, state.selection.main.to).toString();\n    if (await isInvalidAtEnd(query)) {\n      return true;\n    }\n  }\n\n  const characterAfter = state.doc\n    .slice(state.selection.main.to, state.selection.main.to + 1)\n    .toString();\n  const hasSpaceOrEndOfContentAfter = characterAfter.trim().length === 0;\n\n  // open autocomplete if\n  //  - a whitespace was deleted\n  //  - the last char was deleted\n  if (isDeleting && hasSpaceOrEndOfContentAfter) {\n    return true;\n  }\n\n  return false;\n}\n"],
+  "mappings": "AACA,SAAS,yBAAyB;AAGlC,SAAS,mBAAmB;AAQ5B,SAAS,4BAA4B,SAAqC;AACxE,SAAO,QAAQ,YAAY,UAAU,MAAM;AAC7C;AAWA,SAAS,uCACP,SACS;AACT,SAAO,QAAQ,YAAY,oCAAoC,MAAM;AACvE;AAUA,SAAS,oCACP,SACS;AACT,QAAM,sBAAsB,QAAQ;AAAA,IAClC;AAAA,EACF;AAEA,SAAO,wBAAwB;AACjC;AAOA,SAAS,8BAA8B,OAA6B;AAClE,QAAM,cAAc,MAAM,IAAI,MAAM,MAAM,UAAU,KAAK,EAAE,EAAE,SAAS;AACtE,QAAM,qBAAqB,YAAY,UAAU;AAEjD,SACE,uBAAuB,MACvB,mBAAmB,WAAW,IAAI,KAClC,mBAAmB,WAAW,IAAI;AAEtC;AAQA,eAAsB,eAAe,OAAiC;AACpE,QAAM,eAAe,MAAM,QAAQ;AACnC,QAAM,EAAE,QAAQ,MAAM,gBAAgB,CAAC,EAAE,IACtC,MAAM,YAAY,YAAY,KAAM,CAAC;AAExC,QAAM,4BAA4B,eAAe;AAAA,IAC/C,CAAC,iBACC,aAAa,aAAa,WAC1B,aAAa,gBAAgB,IAAI,UAAU,aAAa,SAAS;AAAA,EACrE;AAEA,SAAO,CAAC,SAAS;AACnB;AASA,eAAsB,iBACpB,QAMA,OACkB;AAClB,QAAM,EAAE,UAAU,YAAY,WAAW,iBAAiB,IAAI;AAE9D,QAAM,UAAU,IAAI,kBAAkB,OAAO,MAAM,UAAU,KAAK,IAAI,KAAK;AAE3E,MACE,aACC,uCAAuC,OAAO,KAC7C,oCAAoC,OAAO,MAC7C,8BAA8B,KAAK,GACnC;AACA,WAAO;AAAA,EACT;AAMA,MAAI,oBAAoB,WAAW;AACjC,UAAM,cAAc,MAAM,IAAI,SAAS;AACvC,UAAM,iBAAiB,YAAY,WAAW,MAAM,UAAU,OAAO,CAAC,EAAE;AACxE,UAAM,iBAAiB,MAAM,UAAU,KAAK;AAC5C,UAAM,mBAAmB,MAAM,IAAI,MAAM,GAAG,cAAc,EAAE,SAAS;AACrE,UAAM,gBACJ,QAAQ,YAAY,OAAO,MAAM,QAAQ,iBAAiB,KAAK,MAAM;AAEvE,QACE,YAAY,KAAK,MAAM,MACtB,kBAAkB,4BAA4B,OAAO,KACtD,eACA;AACA,aAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,sBAAsB,QAAQ,YAAY,IAAI;AAGpD,OACG,YAAY,eACb,QAAQ,YAAY,CAAC,SAAS,CAAC,KAC/B,qBACA;AACA,WAAO;AAAA,EACT;AAGA,MAAI,YAAY,4BAA4B,OAAO,GAAG;AACpD,WAAO;AAAA,EACT;AAGA,MAAI,YAAY,qBAAqB;AACnC,UAAM,QAAQ,MAAM,IAAI,MAAM,GAAG,MAAM,UAAU,KAAK,EAAE,EAAE,SAAS;AACnE,QAAI,MAAM,eAAe,KAAK,GAAG;AAC/B,aAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,iBAAiB,MAAM,IAC1B,MAAM,MAAM,UAAU,KAAK,IAAI,MAAM,UAAU,KAAK,KAAK,CAAC,EAC1D,SAAS;AACZ,QAAM,8BAA8B,eAAe,KAAK,EAAE,WAAW;AAKrE,MAAI,cAAc,6BAA6B;AAC7C,WAAO;AAAA,EACT;AAEA,SAAO;AACT;",
   "names": []
 }

package/esm/filters/filter/FilterBar.js

@@ -19,6 +19,7 @@ import { reducer } from "./state/filter-state-reducer.js";
 import {
   FilterBarActions
 } from "./types/filter-state.types.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { isSlot } from "../../core/utils/is-slot.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 const COMPONENT_NAME = "FilterBar";
@@ -65,8 +66,10 @@ const _FilterBar = /* @__PURE__ */ forwardRef(
       style: consumerStyle,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
-      "data-dtrum-allow": dataDtrumAllow
+      "data-dtrum-allow": dataDtrumAllow,
+      ...remainingProps
     } = props;
+    const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);
     const language = getLanguage();
     const [lastAddedItem, setLastAddedItem] = useState(null);
     const [isInitialized, setIsInitialized] = useState(false);
@@ -138,6 +141,7 @@ const _FilterBar = /* @__PURE__ */ forwardRef(
             alignItems: "end",
             className: consumerClassName,
             style: consumerStyle,
+            ...behavioralTrackingProps,
             "data-dt-component": COMPONENT_NAME,
             children: [
               slots.items,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/filter/FilterBar.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  type Key,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useState,\n  Children,\n} from 'react';\nimport { IntlProvider } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport { getLanguage } from '@dynatrace-sdk/user-preferences';\n\nimport { FilterBarContext } from './contexts/FilterBarContext.js';\nimport { Item } from './Item.js';\nimport { MoreMenu } from './MoreMenu.js';\nimport { ResetButton } from './ResetButton.js';\nimport { reducer } from './state/filter-state-reducer.js';\nimport {\n  FilterBarActions,\n  type FilterBarReducerAction,\n  type PinnedState,\n} from './types/filter-state.types.js';\nimport type {\n  FilterItemValues,\n  FilterState,\n} from './types/shared-filter-types.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\nconst COMPONENT_NAME = 'FilterBar';\n\n// #region Typings\n/**\n * Props for the Filter component.\n * @public\n */\nexport interface BaseFilterBarProps\n  extends StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** Handler that is called when the value of the sub-filter changes. */\n  onFilterChange: (value: FilterItemValues) => void;\n  /**\n   * All sub-filters connected to this filter.\n   * Only components compatible with FilterItemProps are supported!\n   */\n  children: ReactNode;\n  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */\n  id?: string;\n  /** Defines if the labels are shown for the filter item. If set to false the label will be placed as aria-label instead. It can be overwritten for a single filter item by setting the showLabel-prop of the item as well. */\n  showLabels?: boolean;\n}\n\n/**\n * @public\n */\nexport interface ControlledFilterBarProps {\n  /** The current pinned state of the item. */\n  pinnedState: PinnedState;\n  /** Handler that is called when the pinned state changes. */\n  onPinnedStateChange: (\n    newState: PinnedState,\n    changedItems: Array<string>,\n  ) => void;\n  /** Determines if a filter item is removable and its initial pinning state. */\n  defaultPinnedState?: never;\n}\n\n/**\n * @public\n */\nexport interface UncontrolledFilterBarProps {\n  /** The current pinned state of the item. */\n  pinnedState?: never;\n  /** Handler that is called when the pinned state changes. */\n  onPinnedStateChange?: (newState: PinnedState, changedItems: Key[]) => void;\n  /**\n   * Determines if a filter item is removable and its initial pinning state.\n   * @defaultValue 'pinned'\n   */\n  defaultPinnedState?: PinnedState;\n}\n\n/**\n * @public\n */\nexport type FilterBarProps = (\n  | ControlledFilterBarProps\n  | UncontrolledFilterBarProps\n) &\n  BaseFilterBarProps;\n\n/**\n * Defines slots into which children of the filter should be rendered.\n * The 'more' slot is used for rendering filter items in addition to the 'items' slot.\n */\ntype FilterBarSlots = {\n  items: ReactNode[];\n  more: ReactNode[];\n  reset: ReactNode;\n};\n// #endregion\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getItemSlotsAndDefaultPinnedFilters(\n  children: ReactNode,\n  defaultPinnedState: PinnedState,\n) {\n  const slots: FilterBarSlots = {\n    items: [],\n    more: [],\n    reset: null,\n  };\n  const defaultPinnedFilters: Key[] = [];\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, Item)) {\n      const pinnedState = defaultPinnedState[child.props.name] ?? 'pinned';\n      switch (pinnedState) {\n        case 'optional':\n          slots.more.push(child);\n          break;\n        case 'pinned-optional':\n          defaultPinnedFilters.push(child.props.name);\n          slots.more.push(child);\n          break;\n        default:\n          slots.items.push(child);\n      }\n    } else if (isElement(child) && child.type === ResetButton) {\n      slots.reset = child;\n    } else if (child !== null) {\n      // do nothing if the child is null (when rendered conditionally for example) and throw a warning otherwise\n      // eslint-disable-next-line no-console\n      console.warn('The used child is not supported by the FilterBar.');\n    }\n  }\n\n  return { slots, defaultPinnedFilters };\n}\n\nconst _FilterBar = /* @__PURE__ */ forwardRef<HTMLDivElement, FilterBarProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      id,\n      onFilterChange,\n      onPinnedStateChange,\n      defaultPinnedState,\n      pinnedState,\n      showLabels = true,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n    }: FilterBarProps = props;\n    const language = getLanguage();\n    const [lastAddedItem, setLastAddedItem] = useState<string | null>(null);\n    const [isInitialized, setIsInitialized] = useState<boolean>(false);\n\n    const callback = useCallback(\n      (state: FilterState, action: FilterBarReducerAction) =>\n        // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n        // @ts-ignore Strict mode transition - needs to be investigated\n        reducer(state, action, !!pinnedState, onPinnedStateChange),\n      // pinnedState is excluded since if it would change the component would switch from controlled to uncontrolled.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [onFilterChange, onPinnedStateChange],\n    );\n\n    // Initialize state and action dispatcher of the filter\n    const [state, dispatch] = useReducer(callback, {\n      filters: undefined,\n      itemsPinnedState: defaultPinnedState ?? pinnedState,\n    });\n\n    useEffect(() => {\n      if (pinnedState) {\n        dispatch({\n          type: FilterBarActions.CHANGEPINNEDSTATE,\n          payload: {\n            newPinnedState: pinnedState,\n          },\n        });\n      }\n    }, [pinnedState]);\n\n    // Since the filter items register themselves in the state, the state is correctly initialized after the first render.\n    // To not trigger the onChange initially we need to set the starting point manually.\n    useEffect(() => {\n      if (state.filters === undefined) {\n        return;\n      }\n\n      if (!isInitialized) {\n        setIsInitialized(true);\n      } else {\n        onFilterChange(state.filters);\n      }\n\n      // onFilterChange callback dependency changes every render and is therefore excluded.\n      // the changes in isInitialized should only be considered in the next real render and not rerender the filterbar.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [state.filters]);\n\n    const { slots } = useMemo(\n      () =>\n        getItemSlotsAndDefaultPinnedFilters(\n          children,\n          defaultPinnedState ?? pinnedState ?? {},\n        ),\n      /**\n       * Disabled for defaultPinnedState, since this should only be considered when rendered initially.\n       */\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [children, pinnedState],\n    );\n\n    return (\n      <FilterBarContext.Provider\n        value={{\n          state,\n          showLabels,\n          dispatch,\n          lastAddedItem,\n          setLastAddedItem,\n          hasControlledPinnedState: !!pinnedState,\n        }}\n      >\n        <Flex\n          flexWrap=\"wrap\"\n          id={id}\n          ref={forwardedRef}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          alignItems=\"end\"\n          className={consumerClassName}\n          style={consumerStyle}\n          data-dt-component={COMPONENT_NAME}\n        >\n          {slots.items}\n          {/* Because the items in the slots are cloned, we need to reprovide intl. */}\n          {slots.more?.length > 0 && (\n            <IntlProvider locale={language}>\n              <MoreMenu>{slots.more}</MoreMenu>\n            </IntlProvider>\n          )}\n          {slots.reset}\n        </Flex>\n      </FilterBarContext.Provider>\n    );\n  },\n);\n\n(_FilterBar as typeof _FilterBar & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * FilterBar helps users easily filter datasets using one or more filter criteria. A range of form elements can be added as filter controls.\n * @public\n */\nexport const FilterBar = Object.assign(_FilterBar, {\n  Item,\n  ResetButton,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  forwardRef,\n  type Key,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useState,\n  Children,\n} from 'react';\nimport { IntlProvider } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport { getLanguage } from '@dynatrace-sdk/user-preferences';\n\nimport { FilterBarContext } from './contexts/FilterBarContext.js';\nimport { Item } from './Item.js';\nimport { MoreMenu } from './MoreMenu.js';\nimport { ResetButton } from './ResetButton.js';\nimport { reducer } from './state/filter-state-reducer.js';\nimport {\n  FilterBarActions,\n  type FilterBarReducerAction,\n  type PinnedState,\n} from './types/filter-state.types.js';\nimport type {\n  FilterItemValues,\n  FilterState,\n} from './types/shared-filter-types.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\nconst COMPONENT_NAME = 'FilterBar';\n\n// #region Typings\n/**\n * Props for the Filter component.\n * @public\n */\nexport interface BaseFilterBarProps\n  extends StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** Handler that is called when the value of the sub-filter changes. */\n  onFilterChange: (value: FilterItemValues) => void;\n  /**\n   * All sub-filters connected to this filter.\n   * Only components compatible with FilterItemProps are supported!\n   */\n  children: ReactNode;\n  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */\n  id?: string;\n  /** Defines if the labels are shown for the filter item. If set to false the label will be placed as aria-label instead. It can be overwritten for a single filter item by setting the showLabel-prop of the item as well. */\n  showLabels?: boolean;\n}\n\n/**\n * @public\n */\nexport interface ControlledFilterBarProps {\n  /** The current pinned state of the item. */\n  pinnedState: PinnedState;\n  /** Handler that is called when the pinned state changes. */\n  onPinnedStateChange: (\n    newState: PinnedState,\n    changedItems: Array<string>,\n  ) => void;\n  /** Determines if a filter item is removable and its initial pinning state. */\n  defaultPinnedState?: never;\n}\n\n/**\n * @public\n */\nexport interface UncontrolledFilterBarProps {\n  /** The current pinned state of the item. */\n  pinnedState?: never;\n  /** Handler that is called when the pinned state changes. */\n  onPinnedStateChange?: (newState: PinnedState, changedItems: Key[]) => void;\n  /**\n   * Determines if a filter item is removable and its initial pinning state.\n   * @defaultValue 'pinned'\n   */\n  defaultPinnedState?: PinnedState;\n}\n\n/**\n * @public\n */\nexport type FilterBarProps = (\n  | ControlledFilterBarProps\n  | UncontrolledFilterBarProps\n) &\n  BaseFilterBarProps;\n\n/**\n * Defines slots into which children of the filter should be rendered.\n * The 'more' slot is used for rendering filter items in addition to the 'items' slot.\n */\ntype FilterBarSlots = {\n  items: ReactNode[];\n  more: ReactNode[];\n  reset: ReactNode;\n};\n// #endregion\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getItemSlotsAndDefaultPinnedFilters(\n  children: ReactNode,\n  defaultPinnedState: PinnedState,\n) {\n  const slots: FilterBarSlots = {\n    items: [],\n    more: [],\n    reset: null,\n  };\n  const defaultPinnedFilters: Key[] = [];\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, Item)) {\n      const pinnedState = defaultPinnedState[child.props.name] ?? 'pinned';\n      switch (pinnedState) {\n        case 'optional':\n          slots.more.push(child);\n          break;\n        case 'pinned-optional':\n          defaultPinnedFilters.push(child.props.name);\n          slots.more.push(child);\n          break;\n        default:\n          slots.items.push(child);\n      }\n    } else if (isElement(child) && child.type === ResetButton) {\n      slots.reset = child;\n    } else if (child !== null) {\n      // do nothing if the child is null (when rendered conditionally for example) and throw a warning otherwise\n      // eslint-disable-next-line no-console\n      console.warn('The used child is not supported by the FilterBar.');\n    }\n  }\n\n  return { slots, defaultPinnedFilters };\n}\n\nconst _FilterBar = /* @__PURE__ */ forwardRef<HTMLDivElement, FilterBarProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      id,\n      onFilterChange,\n      onPinnedStateChange,\n      defaultPinnedState,\n      pinnedState,\n      showLabels = true,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: FilterBarProps = props;\n    const [behavioralTrackingProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const language = getLanguage();\n    const [lastAddedItem, setLastAddedItem] = useState<string | null>(null);\n    const [isInitialized, setIsInitialized] = useState<boolean>(false);\n\n    const callback = useCallback(\n      (state: FilterState, action: FilterBarReducerAction) =>\n        // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n        // @ts-ignore Strict mode transition - needs to be investigated\n        reducer(state, action, !!pinnedState, onPinnedStateChange),\n      // pinnedState is excluded since if it would change the component would switch from controlled to uncontrolled.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [onFilterChange, onPinnedStateChange],\n    );\n\n    // Initialize state and action dispatcher of the filter\n    const [state, dispatch] = useReducer(callback, {\n      filters: undefined,\n      itemsPinnedState: defaultPinnedState ?? pinnedState,\n    });\n\n    useEffect(() => {\n      if (pinnedState) {\n        dispatch({\n          type: FilterBarActions.CHANGEPINNEDSTATE,\n          payload: {\n            newPinnedState: pinnedState,\n          },\n        });\n      }\n    }, [pinnedState]);\n\n    // Since the filter items register themselves in the state, the state is correctly initialized after the first render.\n    // To not trigger the onChange initially we need to set the starting point manually.\n    useEffect(() => {\n      if (state.filters === undefined) {\n        return;\n      }\n\n      if (!isInitialized) {\n        setIsInitialized(true);\n      } else {\n        onFilterChange(state.filters);\n      }\n\n      // onFilterChange callback dependency changes every render and is therefore excluded.\n      // the changes in isInitialized should only be considered in the next real render and not rerender the filterbar.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [state.filters]);\n\n    const { slots } = useMemo(\n      () =>\n        getItemSlotsAndDefaultPinnedFilters(\n          children,\n          defaultPinnedState ?? pinnedState ?? {},\n        ),\n      /**\n       * Disabled for defaultPinnedState, since this should only be considered when rendered initially.\n       */\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [children, pinnedState],\n    );\n\n    return (\n      <FilterBarContext.Provider\n        value={{\n          state,\n          showLabels,\n          dispatch,\n          lastAddedItem,\n          setLastAddedItem,\n          hasControlledPinnedState: !!pinnedState,\n        }}\n      >\n        <Flex\n          flexWrap=\"wrap\"\n          id={id}\n          ref={forwardedRef}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          alignItems=\"end\"\n          className={consumerClassName}\n          style={consumerStyle}\n          {...behavioralTrackingProps}\n          data-dt-component={COMPONENT_NAME}\n        >\n          {slots.items}\n          {/* Because the items in the slots are cloned, we need to reprovide intl. */}\n          {slots.more?.length > 0 && (\n            <IntlProvider locale={language}>\n              <MoreMenu>{slots.more}</MoreMenu>\n            </IntlProvider>\n          )}\n          {slots.reset}\n        </Flex>\n      </FilterBarContext.Provider>\n    );\n  },\n);\n\n(_FilterBar as typeof _FilterBar & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * FilterBar helps users easily filter datasets using one or more filter criteria. A range of form elements can be added as filter controls.\n * @public\n */\nexport const FilterBar = Object.assign(_FilterBar, {\n  Item,\n  ResetButton,\n});\n"],
+  "mappings": "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",
   "names": ["state"]
 }

package/esm/filters/filter/Item.js

@@ -7,6 +7,7 @@ import {
 } from "react";
 import { useFilterBarContext } from "./hooks/useFilterBarContext.js";
 import { FilterBarActions } from "./types/filter-state.types.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
 import { isDev } from "../../core/utils/is-node-environment.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
@@ -21,8 +22,10 @@ const InternalItem = (props) => {
     showLabel: propShowLabel,
     className: consumerClassName,
     style: consumerStyle,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    ...remainingProps
   } = props;
+  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);
   const { defaultValue, value, onChange, ...propsWithoutContractProperties } = child.props;
   const [filterValue, setFilterValue] = useControllableState({
     defaultValue,
@@ -83,6 +86,7 @@ const InternalItem = (props) => {
       id: propsWithoutContractProperties.id,
       className: consumerClassName,
       style: consumerStyle,
+      ...behavioralTrackingProps,
       children: [
         showLabel && /* @__PURE__ */ jsx(Label, { children: label }),
         cloneElement(child, {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/filter/Item.tsx"],
-  "sourcesContent": ["import {\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useRef,\n  cloneElement,\n} from 'react';\n\n\nimport { useFilterBarContext } from './hooks/useFilterBarContext.js';\nimport { FilterBarActions } from './types/filter-state.types.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { FormField } from '../../forms/forms-core/components/form-field/FormField.js';\nimport { Label } from '../../forms/forms-core/components/label/Label.js';\nimport type {\n  FormControlRef,\n  FormControlWithOverlayRef,\n} from '../../forms/shared-types.js';\nimport { isFormControlWithOverlayRef } from '../../forms/shared-types.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface FilterBarItemProps extends StylingProps, DataTestId {\n  /** A unique identifier for this sub-filter (must only be unique for this filter). In case custom labels are used without text children, this is displayed on the MoreMenu trigger instead. */\n  name: string;\n  /** Description text of this sub-filter. If you use a custom label without text children, the name will be displayed on the MoreMenu instead. */\n  label: ReactNode;\n  /** Only one element, is expected here. */\n  // TODO: React 19 update - We will need to check if limiting the props here actually has an effect to the public api validation.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  children: ReactElement<any>;\n  /** Defines if the label is shown for the filter item. If set specifically, it also overwrites the general configuration set with the showLabels prop on the FilterBar for one item. */\n  showLabel?: boolean;\n}\n//#endregion Typings\n\nconst InternalItem = (props: FilterBarItemProps) => {\n  const {\n    name,\n    label,\n    children: child,\n    showLabel: propShowLabel,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  }: FilterBarItemProps = props;\n  const { defaultValue, value, onChange, ...propsWithoutContractProperties } =\n    child.props;\n  const [filterValue, setFilterValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const { dispatch, showLabels, lastAddedItem, state } = useFilterBarContext();\n  const showLabel = propShowLabel ?? showLabels;\n  const isStringLabel = typeof label === 'string';\n\n  const filterItemRef = useRef<FormControlRef | FormControlWithOverlayRef>(\n    null,\n  );\n\n  if (!isStringLabel && !showLabel && isDev()) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      \"FilterBar.Item: the showLabel prop was set to false but the provided label can't be used as aria-label because it is not a string. \" +\n        'Please provide a string-based label or set showLabel to true for this FilterBar.Item.',\n    );\n  }\n\n  // Is only called on the first render or if the name changes when conditionally rendering it, for the context to have the proper initial state.\n  useEffect(() => {\n    dispatch({\n      type: FilterBarActions.INITIALIZE,\n      payload: {\n        name,\n        value: filterValue,\n      },\n    });\n\n    setTimeout(() => {\n      // If the item was added via the addFilter-dropdown the newly added item should be focused or opened depending on the control.\n      if (lastAddedItem === name) {\n        filterItemRef?.current?.focus?.();\n\n        if (\n          filterItemRef?.current &&\n          isFormControlWithOverlayRef(filterItemRef?.current)\n        ) {\n          filterItemRef?.current?.open();\n        }\n      }\n    });\n\n    return () => {\n      dispatch({\n        type: FilterBarActions.REMOVE,\n        payload: {\n          name,\n        },\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [name]);\n\n  // must trigger the change after rendering to avoid a state update during rendering.\n  useEffect(() => {\n    if (state.filters?.[name] && filterValue !== state.filters?.[name].value) {\n      dispatch({\n        type: FilterBarActions.CHANGE,\n        payload: {\n          name,\n          value: filterValue,\n        },\n      });\n    }\n    // name is excluded since the Filter.Item must be reinitialized when it changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [filterValue, state.filters?.[name]]);\n\n  return (\n    <FormField\n      data-testid={dataTestId}\n      id={propsWithoutContractProperties.id}\n      className={consumerClassName}\n      style={consumerStyle}\n    >\n      {showLabel && <Label>{label}</Label>}\n      {cloneElement(child, {\n        ..._mergeProps(propsWithoutContractProperties, {\n          value: filterValue,\n          onChange: setFilterValue,\n          'aria-label': isStringLabel && !showLabel ? label : undefined,\n          ref: filterItemRef,\n        }),\n      })}\n    </FormField>\n  );\n};\n\n/**\n * FilterBar.Item component, used for rendering custom filters inside the filter bar. Requires a unique name prop in order to keep track of the filter.\n * @public\n */\nexport const Item = (props: FilterBarItemProps) => {\n  /* We need to pass a key so that we invalidate the useControllableState hook usage and remount the component when rendered conditionally.\n   This is a code sample of the issue and possible fixes: https://codesandbox.io/s/smoosh-frog-q57xiw?file=/src/App.tsx\n   Also, this is a blog post describing the key issue in more detail: https://www.nikgraf.com/blog/using-reacts-key-attribute-to-remount-a-component */\n  return <InternalItem {...props} key={props.name} />;\n};\nItem['displayName'] = 'FilterBar.Item';\n"],
-  "mappings": "AA+HI,SAMgB,KANhB;AA2BK;AA1JT;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAGrC,SAAS,aAAa;AACtB,SAAS,cAAc,mBAAmB;AAC1C,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AAKtB,SAAS,mCAAmC;AAoB5C,MAAM,eAAe,CAAC,UAA8B;AAClD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAwB;AACxB,QAAM,EAAE,cAAc,OAAO,UAAU,GAAG,+BAA+B,IACvE,MAAM;AACR,QAAM,CAAC,aAAa,cAAc,IAAI,qBAAqB;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,UAAU,YAAY,eAAe,MAAM,IAAI,oBAAoB;AAC3E,QAAM,YAAY,iBAAiB;AACnC,QAAM,gBAAgB,OAAO,UAAU;AAEvC,QAAM,gBAAgB;AAAA,IACpB;AAAA,EACF;AAEA,MAAI,CAAC,iBAAiB,CAAC,aAAa,MAAM,GAAG;AAE3C,YAAQ;AAAA,MACN;AAAA,IAEF;AAAA,EACF;AAGA,YAAU,MAAM;AACd,aAAS;AAAA,MACP,MAAM,iBAAiB;AAAA,MACvB,SAAS;AAAA,QACP;AAAA,QACA,OAAO;AAAA,MACT;AAAA,IACF,CAAC;AAED,eAAW,MAAM;AAEf,UAAI,kBAAkB,MAAM;AAC1B,uBAAe,SAAS,QAAQ;AAEhC,YACE,eAAe,WACf,4BAA4B,eAAe,OAAO,GAClD;AACA,yBAAe,SAAS,KAAK;AAAA,QAC/B;AAAA,MACF;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,eAAS;AAAA,QACP,MAAM,iBAAiB;AAAA,QACvB,SAAS;AAAA,UACP;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,CAAC,IAAI,CAAC;AAGT,YAAU,MAAM;AACd,QAAI,MAAM,UAAU,IAAI,KAAK,gBAAgB,MAAM,UAAU,IAAI,EAAE,OAAO;AACxE,eAAS;AAAA,QACP,MAAM,iBAAiB;AAAA,QACvB,SAAS;AAAA,UACP;AAAA,UACA,OAAO;AAAA,QACT;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAGF,GAAG,CAAC,aAAa,MAAM,UAAU,IAAI,CAAC,CAAC;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,IAAI,+BAA+B;AAAA,MACnC,WAAW;AAAA,MACX,OAAO;AAAA,MAEN;AAAA,qBAAa,oBAAC,SAAO,iBAAM;AAAA,QAC3B,aAAa,OAAO;AAAA,UACnB,GAAG,YAAY,gCAAgC;AAAA,YAC7C,OAAO;AAAA,YACP,UAAU;AAAA,YACV,cAAc,iBAAiB,CAAC,YAAY,QAAQ;AAAA,YACpD,KAAK;AAAA,UACP,CAAC;AAAA,QACH,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ;AAMO,MAAM,OAAO,CAAC,UAA8B;AAIjD,SAAO,8BAAC,gBAAc,GAAG,OAAO,KAAK,MAAM,MAAM;AACnD;AACA,KAAK,aAAa,IAAI;",
+  "sourcesContent": ["import {\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useRef,\n  cloneElement,\n} from 'react';\n\nimport { useFilterBarContext } from './hooks/useFilterBarContext.js';\nimport { FilterBarActions } from './types/filter-state.types.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { FormField } from '../../forms/forms-core/components/form-field/FormField.js';\nimport { Label } from '../../forms/forms-core/components/label/Label.js';\nimport type {\n  FormControlRef,\n  FormControlWithOverlayRef,\n} from '../../forms/shared-types.js';\nimport { isFormControlWithOverlayRef } from '../../forms/shared-types.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface FilterBarItemProps\n  extends StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  /** A unique identifier for this sub-filter (must only be unique for this filter). In case custom labels are used without text children, this is displayed on the MoreMenu trigger instead. */\n  name: string;\n  /** Description text of this sub-filter. If you use a custom label without text children, the name will be displayed on the MoreMenu instead. */\n  label: ReactNode;\n  /** Only one element, is expected here. */\n  // TODO: React 19 update - We will need to check if limiting the props here actually has an effect to the public api validation.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  children: ReactElement<any>;\n  /** Defines if the label is shown for the filter item. If set specifically, it also overwrites the general configuration set with the showLabels prop on the FilterBar for one item. */\n  showLabel?: boolean;\n}\n//#endregion Typings\n\nconst InternalItem = (props: FilterBarItemProps) => {\n  const {\n    name,\n    label,\n    children: child,\n    showLabel: propShowLabel,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: FilterBarItemProps = props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n  const { defaultValue, value, onChange, ...propsWithoutContractProperties } =\n    child.props;\n  const [filterValue, setFilterValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const { dispatch, showLabels, lastAddedItem, state } = useFilterBarContext();\n  const showLabel = propShowLabel ?? showLabels;\n  const isStringLabel = typeof label === 'string';\n\n  const filterItemRef = useRef<FormControlRef | FormControlWithOverlayRef>(\n    null,\n  );\n\n  if (!isStringLabel && !showLabel && isDev()) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      \"FilterBar.Item: the showLabel prop was set to false but the provided label can't be used as aria-label because it is not a string. \" +\n        'Please provide a string-based label or set showLabel to true for this FilterBar.Item.',\n    );\n  }\n\n  // Is only called on the first render or if the name changes when conditionally rendering it, for the context to have the proper initial state.\n  useEffect(() => {\n    dispatch({\n      type: FilterBarActions.INITIALIZE,\n      payload: {\n        name,\n        value: filterValue,\n      },\n    });\n\n    setTimeout(() => {\n      // If the item was added via the addFilter-dropdown the newly added item should be focused or opened depending on the control.\n      if (lastAddedItem === name) {\n        filterItemRef?.current?.focus?.();\n\n        if (\n          filterItemRef?.current &&\n          isFormControlWithOverlayRef(filterItemRef?.current)\n        ) {\n          filterItemRef?.current?.open();\n        }\n      }\n    });\n\n    return () => {\n      dispatch({\n        type: FilterBarActions.REMOVE,\n        payload: {\n          name,\n        },\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [name]);\n\n  // must trigger the change after rendering to avoid a state update during rendering.\n  useEffect(() => {\n    if (state.filters?.[name] && filterValue !== state.filters?.[name].value) {\n      dispatch({\n        type: FilterBarActions.CHANGE,\n        payload: {\n          name,\n          value: filterValue,\n        },\n      });\n    }\n    // name is excluded since the Filter.Item must be reinitialized when it changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [filterValue, state.filters?.[name]]);\n\n  return (\n    <FormField\n      data-testid={dataTestId}\n      id={propsWithoutContractProperties.id}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...behavioralTrackingProps}\n    >\n      {showLabel && <Label>{label}</Label>}\n      {cloneElement(child, {\n        ..._mergeProps(propsWithoutContractProperties, {\n          value: filterValue,\n          onChange: setFilterValue,\n          'aria-label': isStringLabel && !showLabel ? label : undefined,\n          ref: filterItemRef,\n        }),\n      })}\n    </FormField>\n  );\n};\n\n/**\n * FilterBar.Item component, used for rendering custom filters inside the filter bar. Requires a unique name prop in order to keep track of the filter.\n * @public\n */\nexport const Item = (props: FilterBarItemProps) => {\n  /* We need to pass a key so that we invalidate the useControllableState hook usage and remount the component when rendered conditionally.\n   This is a code sample of the issue and possible fixes: https://codesandbox.io/s/smoosh-frog-q57xiw?file=/src/App.tsx\n   Also, this is a blog post describing the key issue in more detail: https://www.nikgraf.com/blog/using-reacts-key-attribute-to-remount-a-component */\n  return <InternalItem {...props} key={props.name} />;\n};\nItem['displayName'] = 'FilterBar.Item';\n"],
+  "mappings": "AAqII,SAOgB,KAPhB;AA4BK;AAjKT;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AAIrC,SAAS,aAAa;AACtB,SAAS,cAAc,mBAAmB;AAC1C,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AAKtB,SAAS,mCAAmC;AAuB5C,MAAM,eAAe,CAAC,UAA8B;AAClD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAwB;AACxB,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,cAAc;AAC3E,QAAM,EAAE,cAAc,OAAO,UAAU,GAAG,+BAA+B,IACvE,MAAM;AACR,QAAM,CAAC,aAAa,cAAc,IAAI,qBAAqB;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,UAAU,YAAY,eAAe,MAAM,IAAI,oBAAoB;AAC3E,QAAM,YAAY,iBAAiB;AACnC,QAAM,gBAAgB,OAAO,UAAU;AAEvC,QAAM,gBAAgB;AAAA,IACpB;AAAA,EACF;AAEA,MAAI,CAAC,iBAAiB,CAAC,aAAa,MAAM,GAAG;AAE3C,YAAQ;AAAA,MACN;AAAA,IAEF;AAAA,EACF;AAGA,YAAU,MAAM;AACd,aAAS;AAAA,MACP,MAAM,iBAAiB;AAAA,MACvB,SAAS;AAAA,QACP;AAAA,QACA,OAAO;AAAA,MACT;AAAA,IACF,CAAC;AAED,eAAW,MAAM;AAEf,UAAI,kBAAkB,MAAM;AAC1B,uBAAe,SAAS,QAAQ;AAEhC,YACE,eAAe,WACf,4BAA4B,eAAe,OAAO,GAClD;AACA,yBAAe,SAAS,KAAK;AAAA,QAC/B;AAAA,MACF;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,eAAS;AAAA,QACP,MAAM,iBAAiB;AAAA,QACvB,SAAS;AAAA,UACP;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,CAAC,IAAI,CAAC;AAGT,YAAU,MAAM;AACd,QAAI,MAAM,UAAU,IAAI,KAAK,gBAAgB,MAAM,UAAU,IAAI,EAAE,OAAO;AACxE,eAAS;AAAA,QACP,MAAM,iBAAiB;AAAA,QACvB,SAAS;AAAA,UACP;AAAA,UACA,OAAO;AAAA,QACT;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAGF,GAAG,CAAC,aAAa,MAAM,UAAU,IAAI,CAAC,CAAC;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,IAAI,+BAA+B;AAAA,MACnC,WAAW;AAAA,MACX,OAAO;AAAA,MACN,GAAG;AAAA,MAEH;AAAA,qBAAa,oBAAC,SAAO,iBAAM;AAAA,QAC3B,aAAa,OAAO;AAAA,UACnB,GAAG,YAAY,gCAAgC;AAAA,YAC7C,OAAO;AAAA,YACP,UAAU;AAAA,YACV,cAAc,iBAAiB,CAAC,YAAY,QAAQ;AAAA,YACpD,KAAK;AAAA,UACP,CAAC;AAAA,QACH,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ;AAMO,MAAM,OAAO,CAAC,UAA8B;AAIjD,SAAO,8BAAC,gBAAc,GAAG,OAAO,KAAK,MAAM,MAAM;AACnD;AACA,KAAK,aAAa,IAAI;",
   "names": []
 }

package/esm/filters/filter/MoreMenu.js

@@ -25,7 +25,8 @@ const MoreMenu = ({ children }) => {
   });
   const { focusClassName, focusProps } = useFocusRing({
     color: "neutral",
-    focusWithin: true
+    focusWithin: true,
+    ignoreModality: true
   });
   const { dispatch, setLastAddedItem, state } = useFilterBarContext(), { itemsPinnedState } = state;
   const selectRef = useRef(null);

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  });\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 { 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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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/filter/ResetButton.tsx"],
-  "sourcesContent": ["import { type ForwardedRef, forwardRef, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ResetIcon } from '@dynatrace/strato-icons';\n\nimport { Button } from '../../buttons/button/Button.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\n\n//#region Typings\n/**\n * Accepted properties for the Chip Button.\n * @public\n */\nexport interface ResetButtonProps\n  extends AriaLabelingProps,\n    DOMProps,\n    StylingProps,\n    DataTestId {\n  /** Handler that is called when the ResetButton is clicked. */\n  onClick: () => void;\n}\n//#endregion Typings\n\n/**\n * Component which allows resetting the values of the FilterBar items.\n * @public\n */\nexport const ResetButton = /* @__PURE__ */ forwardRef(\n  (props: ResetButtonProps, forwardedRef: ForwardedRef<HTMLButtonElement>) => {\n    const {\n      onClick,\n      'aria-labelledby': ariaLabelledByProp,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    }: ResetButtonProps = props;\n\n    const intl = useIntl();\n    const resetText = intl.formatMessage({\n      defaultMessage: 'Reset filters',\n      id: '21mG229oVCMPPsYY',\n      description: 'Shown for the reset button of the FilterBar.',\n    });\n\n    const tooltipId = useId();\n\n    const ariaLabelledBy = useMemo(\n      () =>\n        tooltipId || ariaLabelledByProp\n          ? `${tooltipId} ${ariaLabelledByProp ?? ''}`\n          : undefined,\n      [ariaLabelledByProp, tooltipId],\n    );\n\n    return (\n      <Tooltip id={tooltipId} text={resetText}>\n        <Button\n          data-testid={dataTestId}\n          ref={forwardedRef}\n          variant=\"default\"\n          onClick={onClick}\n          aria-label={resetText}\n          aria-labelledby={ariaLabelledBy}\n          className={consumerClassName}\n          style={consumerStyle}\n          {...remainingProps}\n        >\n          <Button.Prefix>\n            <ResetIcon />\n          </Button.Prefix>\n        </Button>\n      </Tooltip>\n    );\n  },\n);\n\n(ResetButton as typeof ResetButton & { displayName: string }).displayName =\n  'FilterBar.ResetButton';\n"],
-  "mappings": "AA0EY;AA1EZ,SAA4B,YAAY,eAAe;AACvD,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAE1B,SAAS,cAAc;AACvB,SAAS,aAAa;AAKtB,SAAS,eAAe;AAqBjB,MAAM,cAA8B;AAAA,EACzC,CAAC,OAAyB,iBAAkD;AAC1E,UAAM;AAAA,MACJ;AAAA,MACA,mBAAmB;AAAA,MACnB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAAsB;AAEtB,UAAM,OAAO,QAAQ;AACrB,UAAM,YAAY,KAAK,cAAc;AAAA,MACnC,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AAED,UAAM,YAAY,MAAM;AAExB,UAAM,iBAAiB;AAAA,MACrB,MACE,aAAa,qBACT,GAAG,SAAS,IAAI,sBAAsB,EAAE,KACxC;AAAA,MACN,CAAC,oBAAoB,SAAS;AAAA,IAChC;AAEA,WACE,oBAAC,WAAQ,IAAI,WAAW,MAAM,WAC5B;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,KAAK;AAAA,QACL,SAAQ;AAAA,QACR;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA,QAEJ,8BAAC,OAAO,QAAP,EACC,8BAAC,aAAU,GACb;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEC,YAA6D,cAC5D;",
+  "sourcesContent": ["import { type ForwardedRef, forwardRef, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ResetIcon } from '@dynatrace/strato-icons';\n\nimport { Button } from '../../buttons/button/Button.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\n\n//#region Typings\n/**\n * Accepted properties for the Chip Button.\n * @public\n */\nexport interface ResetButtonProps\n  extends AriaLabelingProps,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  /** Handler that is called when the ResetButton is clicked. */\n  onClick: () => void;\n}\n//#endregion Typings\n\n/**\n * Component which allows resetting the values of the FilterBar items.\n * @public\n */\nexport const ResetButton = /* @__PURE__ */ forwardRef(\n  (props: ResetButtonProps, forwardedRef: ForwardedRef<HTMLButtonElement>) => {\n    const {\n      onClick,\n      'aria-labelledby': ariaLabelledByProp,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    }: ResetButtonProps = props;\n\n    const intl = useIntl();\n    const resetText = intl.formatMessage({\n      defaultMessage: 'Reset filters',\n      id: '21mG229oVCMPPsYY',\n      description: 'Shown for the reset button of the FilterBar.',\n    });\n\n    const tooltipId = useId();\n\n    const ariaLabelledBy = useMemo(\n      () =>\n        tooltipId || ariaLabelledByProp\n          ? `${tooltipId} ${ariaLabelledByProp ?? ''}`\n          : undefined,\n      [ariaLabelledByProp, tooltipId],\n    );\n\n    return (\n      <Tooltip id={tooltipId} text={resetText}>\n        <Button\n          data-testid={dataTestId}\n          ref={forwardedRef}\n          variant=\"default\"\n          onClick={onClick}\n          aria-label={resetText}\n          aria-labelledby={ariaLabelledBy}\n          className={consumerClassName}\n          style={consumerStyle}\n          {...remainingProps}\n        >\n          <Button.Prefix>\n            <ResetIcon />\n          </Button.Prefix>\n        </Button>\n      </Tooltip>\n    );\n  },\n);\n\n(ResetButton as typeof ResetButton & { displayName: string }).displayName =\n  'FilterBar.ResetButton';\n"],
+  "mappings": "AA4EY;AA5EZ,SAA4B,YAAY,eAAe;AACvD,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAE1B,SAAS,cAAc;AACvB,SAAS,aAAa;AAMtB,SAAS,eAAe;AAsBjB,MAAM,cAA8B;AAAA,EACzC,CAAC,OAAyB,iBAAkD;AAC1E,UAAM;AAAA,MACJ;AAAA,MACA,mBAAmB;AAAA,MACnB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAAsB;AAEtB,UAAM,OAAO,QAAQ;AACrB,UAAM,YAAY,KAAK,cAAc;AAAA,MACnC,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AAED,UAAM,YAAY,MAAM;AAExB,UAAM,iBAAiB;AAAA,MACrB,MACE,aAAa,qBACT,GAAG,SAAS,IAAI,sBAAsB,EAAE,KACxC;AAAA,MACN,CAAC,oBAAoB,SAAS;AAAA,IAChC;AAEA,WACE,oBAAC,WAAQ,IAAI,WAAW,MAAM,WAC5B;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,KAAK;AAAA,QACL,SAAQ;AAAA,QACR;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA,QAEJ,8BAAC,OAAO,QAAP,EACC,8BAAC,aAAU,GACb;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEC,YAA6D,cAC5D;",
   "names": []
 }