@dynatrace/strato-components 3.7.0 → 3.8.0

package/esm/filters/filter-field/state/recent-pinned-store.js

@@ -1,5 +1,13 @@
-import { createStore } from "zustand";
 import { parserVersion } from "../utils/conversion/tree-conversion.js";
+function parseStoredFilters(raw) {
+  if (!raw) {
+    return [];
+  }
+  return raw.map((f) => ({
+    ...f,
+    timeUsed: f.timeUsed !== null && f.timeUsed !== void 0 ? new Date(f.timeUsed) : /* @__PURE__ */ new Date()
+  }));
+}
 function addFilterToState(storedFilters, filter, limit) {
   const trimmedFilter = filter.trim();
   const foundIndex = storedFilters.findIndex(
@@ -32,57 +40,9 @@ function removeFilterFromState(storedFilters, filter) {
   }
   return newValues;
 }
-function createRecentAndPinnedFilterStore() {
-  return createStore((set, get) => ({
-    canPin: true,
-    setCanPin: (canPin) => {
-      set(() => ({ canPin }));
-    },
-    recentFilters: [],
-    setRecentFilters: (filters) => {
-      set(() => ({ recentFilters: filters }));
-    },
-    saveRecentFilter: (filterString) => {
-      set((state) => ({
-        recentFilters: addFilterToState(state.recentFilters, filterString, 100)
-      }));
-      return get().recentFilters;
-    },
-    pinnedFilters: [],
-    setPinnedFilters: (filters) => {
-      set(() => ({ pinnedFilters: filters }));
-    },
-    pinFilter: (filterString) => {
-      set((state) => ({
-        pinnedFilters: addFilterToState(state.pinnedFilters, filterString, 10)
-      }));
-      return get().pinnedFilters;
-    },
-    unpinFilter: (filterString) => {
-      set((state) => ({
-        pinnedFilters: removeFilterFromState(state.pinnedFilters, filterString)
-      }));
-      return get().pinnedFilters;
-    }
-  }));
-}
-const voidStore = createStore(() => ({
-  canPin: true,
-  setCanPin: () => void 0,
-  recentFilters: [],
-  setRecentFilters: () => void 0,
-  saveRecentFilter: (filter) => [],
-  pinnedFilters: [],
-  setPinnedFilters: (filters) => void 0,
-  pinFilter: (filter) => [],
-  unpinFilter: (filter) => []
-}));
-const scopedRecentAndPinnedFiltersStores = /* @__PURE__ */ new Map([["root", createRecentAndPinnedFilterStore()]]);
 export {
   addFilterToState,
-  createRecentAndPinnedFilterStore,
-  removeFilterFromState,
-  scopedRecentAndPinnedFiltersStores,
-  voidStore
+  parseStoredFilters,
+  removeFilterFromState
 };
 //# sourceMappingURL=recent-pinned-store.js.map

package/esm/filters/filter-field/state/recent-pinned-store.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/state/recent-pinned-store.tsx"],
-  "sourcesContent": ["import { createStore, type StoreApi } from 'zustand';\n\nimport { parserVersion } from '../utils/conversion/tree-conversion.js';\n\n/** @internal */\nexport interface StoredFilter {\n  filter: string;\n  parserVersion: string;\n  timeUsed: Date;\n}\n\n/**\n * Interface defining the store for recent filters.\n * @internal\n */\nexport interface RecentAndPinnedFiltersState {\n  canPin: boolean;\n  setCanPin: (canPin: boolean) => void;\n  recentFilters: Array<StoredFilter>;\n  setRecentFilters: (filters: Array<StoredFilter>) => void;\n  saveRecentFilter: (filter: string) => Array<StoredFilter>;\n  pinnedFilters: Array<StoredFilter>;\n  setPinnedFilters: (filters: Array<StoredFilter>) => void;\n  pinFilter: (filter: string) => Array<StoredFilter>;\n  unpinFilter: (filter: string) => Array<StoredFilter>;\n}\n\n/**\n * Update logic for saving a filter to the store.\n * @internal\n */\nexport function addFilterToState(\n  storedFilters: StoredFilter[],\n  filter: string,\n  limit: number,\n): StoredFilter[] {\n  const trimmedFilter = filter.trim();\n  const foundIndex = storedFilters.findIndex(\n    (saved) => saved.filter === trimmedFilter,\n  );\n  const newValues = [...storedFilters];\n\n  // The current filter that is trying to be saved was not in the store yet\n  // so we can add it.\n  if (foundIndex === -1) {\n    newValues.push({\n      filter: trimmedFilter,\n      parserVersion: parserVersion,\n      timeUsed: new Date(),\n    });\n  } else if (foundIndex > -1) {\n    // If the filter is found in the list, but the parser version\n    // mismatches, we can update the parser version.\n    if (storedFilters[foundIndex].parserVersion !== parserVersion) {\n      newValues[foundIndex].parserVersion = parserVersion;\n    }\n\n    // If the filter is found in the list, we can also update the timeUsed\n    storedFilters[foundIndex].timeUsed = new Date();\n  }\n\n  // Sort by timeUsed descending (newest first).\n  newValues.sort((a, b) => b.timeUsed.getTime() - a.timeUsed.getTime());\n\n  return newValues.slice(0, limit);\n}\n\n/**\n * Update logic for unpinning a filter\n * @internal\n */\nexport function removeFilterFromState(\n  storedFilters: StoredFilter[],\n  filter: string,\n): StoredFilter[] {\n  const trimmedFilter = filter.trim();\n  const foundIndex = storedFilters.findIndex(\n    (saved) => saved.filter === trimmedFilter,\n  );\n  const newValues = [...storedFilters];\n\n  if (foundIndex > -1) {\n    newValues.splice(foundIndex, 1);\n  }\n  return newValues;\n}\n\n/**\n * Creates a standalone store that can be used to namespace connected filter field storages.\n * @internal\n */\nexport function createRecentAndPinnedFilterStore() {\n  return createStore<RecentAndPinnedFiltersState>((set, get) => ({\n    canPin: true,\n    setCanPin: (canPin: boolean) => {\n      set(() => ({ canPin }));\n    },\n    recentFilters: [],\n    setRecentFilters: (filters: StoredFilter[]) => {\n      set(() => ({ recentFilters: filters }));\n    },\n    saveRecentFilter: (filterString: string) => {\n      set((state) => ({\n        recentFilters: addFilterToState(state.recentFilters, filterString, 100),\n      }));\n      return get().recentFilters;\n    },\n    pinnedFilters: [],\n    setPinnedFilters: (filters: StoredFilter[]) => {\n      set(() => ({ pinnedFilters: filters }));\n    },\n    pinFilter: (filterString: string) => {\n      set((state) => ({\n        pinnedFilters: addFilterToState(state.pinnedFilters, filterString, 10),\n      }));\n      return get().pinnedFilters;\n    },\n    unpinFilter: (filterString: string) => {\n      set((state) => ({\n        pinnedFilters: removeFilterFromState(state.pinnedFilters, filterString),\n      }));\n      return get().pinnedFilters;\n    },\n  }));\n}\n\n/**\n * Void store for opt out feature\n * @internal\n */\nexport const voidStore = createStore<RecentAndPinnedFiltersState>(() => ({\n  canPin: true,\n  setCanPin: () => undefined,\n  recentFilters: [],\n  setRecentFilters: () => undefined,\n  saveRecentFilter: (filter: string) => [],\n  pinnedFilters: [],\n  setPinnedFilters: (filters: StoredFilter[]) => undefined,\n  pinFilter: (filter: string) => [],\n  unpinFilter: (filter: string) => [],\n}));\n\n/**\n * Create a shareable saved filters store map that maps a namespace to a store.\n * @internal\n */\nexport const scopedRecentAndPinnedFiltersStores = new Map<\n  string | symbol,\n  StoreApi<RecentAndPinnedFiltersState>\n>([['root', createRecentAndPinnedFilterStore()]]);\n"],
-  "mappings": "AAAA,SAAS,mBAAkC;AAE3C,SAAS,qBAAqB;AA6BvB,SAAS,iBACd,eACA,QACA,OACgB;AAChB,QAAM,gBAAgB,OAAO,KAAK;AAClC,QAAM,aAAa,cAAc;AAAA,IAC/B,CAAC,UAAU,MAAM,WAAW;AAAA,EAC9B;AACA,QAAM,YAAY,CAAC,GAAG,aAAa;AAInC,MAAI,eAAe,IAAI;AACrB,cAAU,KAAK;AAAA,MACb,QAAQ;AAAA,MACR;AAAA,MACA,UAAU,oBAAI,KAAK;AAAA,IACrB,CAAC;AAAA,EACH,WAAW,aAAa,IAAI;AAG1B,QAAI,cAAc,UAAU,EAAE,kBAAkB,eAAe;AAC7D,gBAAU,UAAU,EAAE,gBAAgB;AAAA,IACxC;AAGA,kBAAc,UAAU,EAAE,WAAW,oBAAI,KAAK;AAAA,EAChD;AAGA,YAAU,KAAK,CAAC,GAAG,MAAM,EAAE,SAAS,QAAQ,IAAI,EAAE,SAAS,QAAQ,CAAC;AAEpE,SAAO,UAAU,MAAM,GAAG,KAAK;AACjC;AAMO,SAAS,sBACd,eACA,QACgB;AAChB,QAAM,gBAAgB,OAAO,KAAK;AAClC,QAAM,aAAa,cAAc;AAAA,IAC/B,CAAC,UAAU,MAAM,WAAW;AAAA,EAC9B;AACA,QAAM,YAAY,CAAC,GAAG,aAAa;AAEnC,MAAI,aAAa,IAAI;AACnB,cAAU,OAAO,YAAY,CAAC;AAAA,EAChC;AACA,SAAO;AACT;AAMO,SAAS,mCAAmC;AACjD,SAAO,YAAyC,CAAC,KAAK,SAAS;AAAA,IAC7D,QAAQ;AAAA,IACR,WAAW,CAAC,WAAoB;AAC9B,UAAI,OAAO,EAAE,OAAO,EAAE;AAAA,IACxB;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,kBAAkB,CAAC,YAA4B;AAC7C,UAAI,OAAO,EAAE,eAAe,QAAQ,EAAE;AAAA,IACxC;AAAA,IACA,kBAAkB,CAAC,iBAAyB;AAC1C,UAAI,CAAC,WAAW;AAAA,QACd,eAAe,iBAAiB,MAAM,eAAe,cAAc,GAAG;AAAA,MACxE,EAAE;AACF,aAAO,IAAI,EAAE;AAAA,IACf;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,kBAAkB,CAAC,YAA4B;AAC7C,UAAI,OAAO,EAAE,eAAe,QAAQ,EAAE;AAAA,IACxC;AAAA,IACA,WAAW,CAAC,iBAAyB;AACnC,UAAI,CAAC,WAAW;AAAA,QACd,eAAe,iBAAiB,MAAM,eAAe,cAAc,EAAE;AAAA,MACvE,EAAE;AACF,aAAO,IAAI,EAAE;AAAA,IACf;AAAA,IACA,aAAa,CAAC,iBAAyB;AACrC,UAAI,CAAC,WAAW;AAAA,QACd,eAAe,sBAAsB,MAAM,eAAe,YAAY;AAAA,MACxE,EAAE;AACF,aAAO,IAAI,EAAE;AAAA,IACf;AAAA,EACF,EAAE;AACJ;AAMO,MAAM,YAAY,YAAyC,OAAO;AAAA,EACvE,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,eAAe,CAAC;AAAA,EAChB,kBAAkB,MAAM;AAAA,EACxB,kBAAkB,CAAC,WAAmB,CAAC;AAAA,EACvC,eAAe,CAAC;AAAA,EAChB,kBAAkB,CAAC,YAA4B;AAAA,EAC/C,WAAW,CAAC,WAAmB,CAAC;AAAA,EAChC,aAAa,CAAC,WAAmB,CAAC;AACpC,EAAE;AAMK,MAAM,qCAAqC,oBAAI,IAGpD,CAAC,CAAC,QAAQ,iCAAiC,CAAC,CAAC,CAAC;",
+  "sourcesContent": ["import { parserVersion } from '../utils/conversion/tree-conversion.js';\n\n/** @internal */\nexport interface StoredFilter {\n  filter: string;\n  parserVersion: string;\n  timeUsed: Date;\n}\n\n/**\n * JSON shape as stored. timeUsed arrives as an ISO string after JSON.parse,\n * but may also be a Date when returned from addFilterToState (before serialization).\n * @internal\n */\nexport interface RawStoredFilter {\n  filter: string;\n  parserVersion?: string;\n  timeUsed?: Date | string;\n}\n\n/**\n * Re-hydrate a JSON-parsed filter array, converting timeUsed strings back to Dates.\n * @internal\n */\nexport function parseStoredFilters(\n  raw: RawStoredFilter[] | undefined,\n): StoredFilter[] {\n  if (!raw) {\n    return [];\n  }\n  return raw.map((f) => ({\n    ...f,\n    timeUsed:\n      f.timeUsed !== null && f.timeUsed !== undefined\n        ? new Date(f.timeUsed)\n        : new Date(),\n  })) as StoredFilter[];\n}\n\n/**\n * Update logic for saving a filter to the store.\n * @internal\n */\nexport function addFilterToState(\n  storedFilters: StoredFilter[],\n  filter: string,\n  limit: number,\n): StoredFilter[] {\n  const trimmedFilter = filter.trim();\n  const foundIndex = storedFilters.findIndex(\n    (saved) => saved.filter === trimmedFilter,\n  );\n  const newValues = [...storedFilters];\n\n  // The current filter that is trying to be saved was not in the store yet\n  // so we can add it.\n  if (foundIndex === -1) {\n    newValues.push({\n      filter: trimmedFilter,\n      parserVersion: parserVersion,\n      timeUsed: new Date(),\n    });\n  } else if (foundIndex > -1) {\n    // If the filter is found in the list, but the parser version\n    // mismatches, we can update the parser version.\n    if (storedFilters[foundIndex].parserVersion !== parserVersion) {\n      newValues[foundIndex].parserVersion = parserVersion;\n    }\n\n    // If the filter is found in the list, we can also update the timeUsed\n    storedFilters[foundIndex].timeUsed = new Date();\n  }\n\n  // Sort by timeUsed descending (newest first).\n  newValues.sort((a, b) => b.timeUsed.getTime() - a.timeUsed.getTime());\n\n  return newValues.slice(0, limit);\n}\n\n/**\n * Update logic for unpinning a filter\n * @internal\n */\nexport function removeFilterFromState(\n  storedFilters: StoredFilter[],\n  filter: string,\n): StoredFilter[] {\n  const trimmedFilter = filter.trim();\n  const foundIndex = storedFilters.findIndex(\n    (saved) => saved.filter === trimmedFilter,\n  );\n  const newValues = [...storedFilters];\n\n  if (foundIndex > -1) {\n    newValues.splice(foundIndex, 1);\n  }\n  return newValues;\n}\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAwBvB,SAAS,mBACd,KACgB;AAChB,MAAI,CAAC,KAAK;AACR,WAAO,CAAC;AAAA,EACV;AACA,SAAO,IAAI,IAAI,CAAC,OAAO;AAAA,IACrB,GAAG;AAAA,IACH,UACE,EAAE,aAAa,QAAQ,EAAE,aAAa,SAClC,IAAI,KAAK,EAAE,QAAQ,IACnB,oBAAI,KAAK;AAAA,EACjB,EAAE;AACJ;AAMO,SAAS,iBACd,eACA,QACA,OACgB;AAChB,QAAM,gBAAgB,OAAO,KAAK;AAClC,QAAM,aAAa,cAAc;AAAA,IAC/B,CAAC,UAAU,MAAM,WAAW;AAAA,EAC9B;AACA,QAAM,YAAY,CAAC,GAAG,aAAa;AAInC,MAAI,eAAe,IAAI;AACrB,cAAU,KAAK;AAAA,MACb,QAAQ;AAAA,MACR;AAAA,MACA,UAAU,oBAAI,KAAK;AAAA,IACrB,CAAC;AAAA,EACH,WAAW,aAAa,IAAI;AAG1B,QAAI,cAAc,UAAU,EAAE,kBAAkB,eAAe;AAC7D,gBAAU,UAAU,EAAE,gBAAgB;AAAA,IACxC;AAGA,kBAAc,UAAU,EAAE,WAAW,oBAAI,KAAK;AAAA,EAChD;AAGA,YAAU,KAAK,CAAC,GAAG,MAAM,EAAE,SAAS,QAAQ,IAAI,EAAE,SAAS,QAAQ,CAAC;AAEpE,SAAO,UAAU,MAAM,GAAG,KAAK;AACjC;AAMO,SAAS,sBACd,eACA,QACgB;AAChB,QAAM,gBAAgB,OAAO,KAAK;AAClC,QAAM,aAAa,cAAc;AAAA,IAC/B,CAAC,UAAU,MAAM,WAAW;AAAA,EAC9B;AACA,QAAM,YAAY,CAAC,GAAG,aAAa;AAEnC,MAAI,aAAa,IAAI;AACnB,cAAU,OAAO,YAAY,CAAC;AAAA,EAChC;AACA,SAAO;AACT;",
   "names": []
 }

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

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

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

@@ -4,8 +4,8 @@ import "../../../core/styles/virtualFocus.css";
 import "./Suggestion.css";
 import "./SuggestionDetails.css";
 import "./RecentPinnedSuggestionItem.css";
-var recentSuggestion = "_vt0w9g0-3-7-0";
-var suggestionPin = "_vt0w9g1-3-7-0";
+var recentSuggestion = "_vt0w9g0-3-8-0";
+var suggestionPin = "_vt0w9g1-3-8-0";
 export {
   recentSuggestion,
   suggestionPin

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/suggestions/RecentPinnedSuggestionItem.css.ts"],
-  "sourcesContent": ["import './SuggestionsOverlay.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/virtualFocus.css';\nimport './Suggestion.css';\nimport './SuggestionDetails.css';\nimport './RecentPinnedSuggestionItem.css';\nexport var recentSuggestion = '_vt0w9g0-3-7-0';\nexport var suggestionPin = '_vt0w9g1-3-7-0';"],
+  "sourcesContent": ["import './SuggestionsOverlay.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/virtualFocus.css';\nimport './Suggestion.css';\nimport './SuggestionDetails.css';\nimport './RecentPinnedSuggestionItem.css';\nexport var recentSuggestion = '_vt0w9g0-3-8-0';\nexport var suggestionPin = '_vt0w9g1-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,mBAAmB;AACvB,IAAI,gBAAgB;",
   "names": []
 }

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

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

package/esm/filters/filter-field/suggestions/Suggestion.sty.js

@@ -2,22 +2,22 @@ import "./SuggestionsOverlay.css";
 import "../../../core/components/app-root/AppRoot.css";
 import "../../../core/styles/virtualFocus.css";
 import "./Suggestion.css";
-var defaultSuggestion = "_1smjoa1c-3-7-0";
-var icon = "_1smjoa10-3-7-0";
-var matchableSuggestionDetails = "_1smjoa12-3-7-0";
-var pastingSuggestion = "_1smjoa1f-3-7-0";
-var searchSuggestion = "_1smjoa1d-3-7-0";
-var statementSuggestionValue = "_1smjoa1e-3-7-0";
-var suggestion = "_1smjoa14-3-7-0";
-var suggestionContent = "_1smjoa15-3-7-0";
-var suggestionText = "_1smjoa16-3-7-0";
-var suggestionsEmptyState = "_1smjoa17-3-7-0";
-var suggestionsJSONPathHint = "_1smjoa18-3-7-0";
-var suggestionsLoading = "_1smjoa19-3-7-0";
-var tooltipWrapper = "_1smjoa1b-3-7-0";
-var truncateWithinMark = "_1smjoa1a-3-7-0";
-var value = "_1smjoa11-3-7-0";
-var virtualizedSuggestion = "_1smjoa13-3-7-0";
+var defaultSuggestion = "_1smjoa1c-3-8-0";
+var icon = "_1smjoa10-3-8-0";
+var matchableSuggestionDetails = "_1smjoa12-3-8-0";
+var pastingSuggestion = "_1smjoa1f-3-8-0";
+var searchSuggestion = "_1smjoa1d-3-8-0";
+var statementSuggestionValue = "_1smjoa1e-3-8-0";
+var suggestion = "_1smjoa14-3-8-0";
+var suggestionContent = "_1smjoa15-3-8-0";
+var suggestionText = "_1smjoa16-3-8-0";
+var suggestionsEmptyState = "_1smjoa17-3-8-0";
+var suggestionsJSONPathHint = "_1smjoa18-3-8-0";
+var suggestionsLoading = "_1smjoa19-3-8-0";
+var tooltipWrapper = "_1smjoa1b-3-8-0";
+var truncateWithinMark = "_1smjoa1a-3-8-0";
+var value = "_1smjoa11-3-8-0";
+var virtualizedSuggestion = "_1smjoa13-3-8-0";
 export {
   defaultSuggestion,
   icon,

package/esm/filters/filter-field/suggestions/Suggestion.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/suggestions/Suggestion.css.ts"],
-  "sourcesContent": ["import './SuggestionsOverlay.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/virtualFocus.css';\nimport './Suggestion.css';\nexport var defaultSuggestion = '_1smjoa1c-3-7-0';\nexport var icon = '_1smjoa10-3-7-0';\nexport var matchableSuggestionDetails = '_1smjoa12-3-7-0';\nexport var pastingSuggestion = '_1smjoa1f-3-7-0';\nexport var searchSuggestion = '_1smjoa1d-3-7-0';\nexport var statementSuggestionValue = '_1smjoa1e-3-7-0';\nexport var suggestion = '_1smjoa14-3-7-0';\nexport var suggestionContent = '_1smjoa15-3-7-0';\nexport var suggestionText = '_1smjoa16-3-7-0';\nexport var suggestionsEmptyState = '_1smjoa17-3-7-0';\nexport var suggestionsJSONPathHint = '_1smjoa18-3-7-0';\nexport var suggestionsLoading = '_1smjoa19-3-7-0';\nexport var tooltipWrapper = '_1smjoa1b-3-7-0';\nexport var truncateWithinMark = '_1smjoa1a-3-7-0';\nexport var value = '_1smjoa11-3-7-0';\nexport var virtualizedSuggestion = '_1smjoa13-3-7-0';"],
+  "sourcesContent": ["import './SuggestionsOverlay.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/virtualFocus.css';\nimport './Suggestion.css';\nexport var defaultSuggestion = '_1smjoa1c-3-8-0';\nexport var icon = '_1smjoa10-3-8-0';\nexport var matchableSuggestionDetails = '_1smjoa12-3-8-0';\nexport var pastingSuggestion = '_1smjoa1f-3-8-0';\nexport var searchSuggestion = '_1smjoa1d-3-8-0';\nexport var statementSuggestionValue = '_1smjoa1e-3-8-0';\nexport var suggestion = '_1smjoa14-3-8-0';\nexport var suggestionContent = '_1smjoa15-3-8-0';\nexport var suggestionText = '_1smjoa16-3-8-0';\nexport var suggestionsEmptyState = '_1smjoa17-3-8-0';\nexport var suggestionsJSONPathHint = '_1smjoa18-3-8-0';\nexport var suggestionsLoading = '_1smjoa19-3-8-0';\nexport var tooltipWrapper = '_1smjoa1b-3-8-0';\nexport var truncateWithinMark = '_1smjoa1a-3-8-0';\nexport var value = '_1smjoa11-3-8-0';\nexport var virtualizedSuggestion = '_1smjoa13-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,OAAO;AACX,IAAI,6BAA6B;AACjC,IAAI,oBAAoB;AACxB,IAAI,mBAAmB;AACvB,IAAI,2BAA2B;AAC/B,IAAI,aAAa;AACjB,IAAI,oBAAoB;AACxB,IAAI,iBAAiB;AACrB,IAAI,wBAAwB;AAC5B,IAAI,0BAA0B;AAC9B,IAAI,qBAAqB;AACzB,IAAI,iBAAiB;AACrB,IAAI,qBAAqB;AACzB,IAAI,QAAQ;AACZ,IAAI,wBAAwB;",
   "names": []
 }

package/esm/filters/filter-field/suggestions/SuggestionDetails.css

@@ -1,7 +1,7 @@
-._tn2lgm0-3-7-0 {
+._tn2lgm0-3-8-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   min-width: 0;
 }
-._tn2lgm1-3-7-0 {
+._tn2lgm1-3-8-0 {
   display: flex;
 }

package/esm/filters/filter-field/suggestions/SuggestionDetails.sty.js

@@ -1,6 +1,6 @@
 import "./SuggestionDetails.css";
-var suggestionDetails = "_tn2lgm0-3-7-0";
-var suggestionDetailsText = "_tn2lgm1-3-7-0";
+var suggestionDetails = "_tn2lgm0-3-8-0";
+var suggestionDetailsText = "_tn2lgm1-3-8-0";
 export {
   suggestionDetails,
   suggestionDetailsText

package/esm/filters/filter-field/suggestions/SuggestionDetails.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/suggestions/SuggestionDetails.css.ts"],
-  "sourcesContent": ["import './SuggestionDetails.css';\nexport var suggestionDetails = '_tn2lgm0-3-7-0';\nexport var suggestionDetailsText = '_tn2lgm1-3-7-0';"],
+  "sourcesContent": ["import './SuggestionDetails.css';\nexport var suggestionDetails = '_tn2lgm0-3-8-0';\nexport var suggestionDetailsText = '_tn2lgm1-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,wBAAwB;",
   "names": []
 }

package/esm/filters/filter-field/suggestions/SuggestionGroup.css

@@ -1,4 +1,4 @@
-._1smjoa13-3-7-0:not(:first-child) > ._5cheea1-3-7-0::before {
+._1smjoa13-3-8-0:not(:first-child) > ._5cheea1-3-8-0::before {
   content: "";
   position: relative;
   display: block;
@@ -6,17 +6,17 @@
   padding-top: var(--dt-spacings-size-8, 8px);
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._5cheea2-3-7-0 {
+._5cheea2-3-8-0 {
   position: relative;
   margin: 0;
   padding: 0;
   list-style-type: none;
   height: fit-content;
 }
-._5cheea2-3-7-0:not(:first-child)::before,
-    ._5cheea0-3-7-0:not(:first-child) ._5cheea2-3-7-0::before,
-    ._ssu5rt2-3-7-0:not(._5cheea0-3-7-0) ._1smjoa13-3-7-0:has(._5cheea2-3-7-0):not(:first-child) ._5cheea2-3-7-0::before,
-    ._ssu5rt2-3-7-0:not(._5cheea0-3-7-0) ._1smjoa13-3-7-0:has(._5cheea2-3-7-0):has(+ ._1smjoa13-3-7-0 > :not(._5cheea2-3-7-0)) ._5cheea2-3-7-0::after
+._5cheea2-3-8-0:not(:first-child)::before,
+    ._5cheea0-3-8-0:not(:first-child) ._5cheea2-3-8-0::before,
+    ._ssu5rt2-3-8-0:not(._5cheea0-3-8-0) ._1smjoa13-3-8-0:has(._5cheea2-3-8-0):not(:first-child) ._5cheea2-3-8-0::before,
+    ._ssu5rt2-3-8-0:not(._5cheea0-3-8-0) ._1smjoa13-3-8-0:has(._5cheea2-3-8-0):has(+ ._1smjoa13-3-8-0 > :not(._5cheea2-3-8-0)) ._5cheea2-3-8-0::after
    {
   content: "";
   position: relative;

package/esm/filters/filter-field/suggestions/SuggestionGroup.sty.js

@@ -3,9 +3,9 @@ import "../../../core/components/app-root/AppRoot.css";
 import "../../../core/styles/virtualFocus.css";
 import "./Suggestion.css";
 import "./SuggestionGroup.css";
-var builtInSuggestionsContainer = "_5cheea0-3-7-0";
-var groupHeaderSeparator = "_5cheea1-3-7-0";
-var suggestionGroup = "_5cheea2-3-7-0";
+var builtInSuggestionsContainer = "_5cheea0-3-8-0";
+var groupHeaderSeparator = "_5cheea1-3-8-0";
+var suggestionGroup = "_5cheea2-3-8-0";
 export {
   builtInSuggestionsContainer,
   groupHeaderSeparator,

package/esm/filters/filter-field/suggestions/SuggestionGroup.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/suggestions/SuggestionGroup.css.ts"],
-  "sourcesContent": ["import './SuggestionsOverlay.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/virtualFocus.css';\nimport './Suggestion.css';\nimport './SuggestionGroup.css';\nexport var builtInSuggestionsContainer = '_5cheea0-3-7-0';\nexport var groupHeaderSeparator = '_5cheea1-3-7-0';\nexport var suggestionGroup = '_5cheea2-3-7-0';"],
+  "sourcesContent": ["import './SuggestionsOverlay.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/virtualFocus.css';\nimport './Suggestion.css';\nimport './SuggestionGroup.css';\nexport var builtInSuggestionsContainer = '_5cheea0-3-8-0';\nexport var groupHeaderSeparator = '_5cheea1-3-8-0';\nexport var suggestionGroup = '_5cheea2-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,8BAA8B;AAClC,IAAI,uBAAuB;AAC3B,IAAI,kBAAkB;",
   "names": []
 }

package/esm/filters/filter-field/suggestions/SuggestionGroupLabel.css

@@ -1,4 +1,4 @@
-._1mfalko0-3-7-0 {
+._1mfalko0-3-8-0 {
   padding: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);

package/esm/filters/filter-field/suggestions/SuggestionGroupLabel.sty.js

@@ -1,5 +1,5 @@
 import "./SuggestionGroupLabel.css";
-var suggestionGroupLabel = "_1mfalko0-3-7-0";
+var suggestionGroupLabel = "_1mfalko0-3-8-0";
 export {
   suggestionGroupLabel
 };

package/esm/filters/filter-field/suggestions/SuggestionGroupLabel.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/suggestions/SuggestionGroupLabel.css.ts"],
-  "sourcesContent": ["import './SuggestionGroupLabel.css';\nexport var suggestionGroupLabel = '_1mfalko0-3-7-0';"],
+  "sourcesContent": ["import './SuggestionGroupLabel.css';\nexport var suggestionGroupLabel = '_1mfalko0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,uBAAuB;",
   "names": []
 }

package/esm/filters/filter-field/suggestions/SuggestionPin.js

@@ -17,18 +17,18 @@ import {
   usePinnedFilterMutation,
   usePinnedFilters
 } from "../hooks/recent-and-pinned/usePinnedFilters.js";
-import { useRecentAndPinnedFiltersStore } from "../hooks/recent-and-pinned/useRecentFiltersStore.js";
 import { useFilterFieldContext } from "../hooks/useFilterFieldContext.js";
 import { filterFieldMessages } from "../messages.js";
 function useSuggestionPin(filterString) {
   const { filterNamespace } = useContext(FilterFieldContext);
-  const pinnedFilters = usePinnedFilters(filterNamespace);
+  const { filters: pinnedFilters, canPin } = usePinnedFilters(filterNamespace);
   const { pinFilter, unpinFilter } = usePinnedFilterMutation(filterNamespace);
-  const isPinned = (pinnedFilters ?? []).find(
+  const isPinned = pinnedFilters.find(
     (storedFilter) => storedFilter.filter === filterString.trim()
   ) !== void 0;
   return {
     isPinned,
+    canPin,
     pinFilter,
     unpinFilter,
     limitReached: pinnedFilters.length >= 10
@@ -49,12 +49,8 @@ function SuggestionPin(props) {
     ...remainingProps
   } = props;
   const intl = useIntl();
-  const { focusedListItem, filterNamespace } = useFilterFieldContext();
-  const canPin = useRecentAndPinnedFiltersStore(
-    (state) => state.canPin,
-    filterNamespace
-  );
-  const { isPinned, pinFilter, unpinFilter, limitReached } = useSuggestionPin(filterString);
+  const { focusedListItem } = useFilterFieldContext();
+  const { isPinned, canPin, pinFilter, unpinFilter, limitReached } = useSuggestionPin(filterString);
   const pinUnpinTooltip = intl.formatMessage(
     filterFieldMessages.suggestions.pinUnpinTooltip,
     { isPinned }

package/esm/filters/filter-field/suggestions/SuggestionPin.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/suggestions/SuggestionPin.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type PointerEvent as ReactPointerEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PinIcon, PinOffIcon } from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../buttons/button/Button.js';\nimport { virtualFocus } from '../../../core/styles/virtualFocus.sty.js';\nimport { getVirtualFocusStyles } from '../../../core/utils/getVirtualFocusStyles.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport { FilterFieldContext } from '../contexts/FilterFieldContext.js';\nimport {\n  usePinnedFilterMutation,\n  usePinnedFilters,\n} from '../hooks/recent-and-pinned/usePinnedFilters.js';\nimport { useRecentAndPinnedFiltersStore } from '../hooks/recent-and-pinned/useRecentFiltersStore.js';\nimport { useFilterFieldContext } from '../hooks/useFilterFieldContext.js';\nimport { filterFieldMessages } from '../messages.js';\n\nexport function useSuggestionPin(filterString: string) {\n  const { filterNamespace } = useContext(FilterFieldContext);\n\n  const pinnedFilters = usePinnedFilters(filterNamespace);\n\n  const { pinFilter, unpinFilter } = usePinnedFilterMutation(filterNamespace);\n\n  const isPinned =\n    (pinnedFilters ?? []).find(\n      (storedFilter) => storedFilter.filter === filterString.trim(),\n    ) !== undefined;\n\n  return {\n    isPinned,\n    pinFilter,\n    unpinFilter,\n    limitReached: pinnedFilters.length >= 10,\n  };\n}\n\n/**\n * @internal\n */\nexport function SuggestionPin(\n  props: Readonly<{\n    size?: 'condensed' | 'default';\n    id: string;\n    role?: string;\n    filterString: string;\n    className?: string;\n    placement: 'top' | 'bottom' | 'left' | 'right';\n    fallbackPlacements: Array<'top' | 'bottom' | 'left' | 'right'>;\n    disabled?: boolean;\n    'aria-disabled'?: boolean;\n    showError?: boolean;\n  }>,\n) {\n  const {\n    id,\n    filterString,\n    className,\n    size,\n    placement,\n    fallbackPlacements,\n    role,\n    disabled,\n    'aria-disabled': ariaDisabledProps,\n    showError,\n    ...remainingProps\n  } = props;\n\n  const intl = useIntl();\n\n  const { focusedListItem, filterNamespace } = useFilterFieldContext();\n  const canPin = useRecentAndPinnedFiltersStore(\n    (state) => state.canPin,\n    filterNamespace,\n  );\n\n  const { isPinned, pinFilter, unpinFilter, limitReached } =\n    useSuggestionPin(filterString);\n\n  const pinUnpinTooltip = intl.formatMessage(\n    filterFieldMessages.suggestions.pinUnpinTooltip,\n    { isPinned },\n  );\n  const pinUnpinLabel = intl.formatMessage(\n    filterFieldMessages.suggestions.pinUnpinLabel,\n    { isPinned, filterString },\n  );\n  const disabledTooltip = intl.formatMessage(\n    filterFieldMessages.suggestions.pinUnpinLimitTooltip,\n  );\n\n  const ariaDisabled = limitReached && !isPinned;\n\n  // Handle tooltips for virtual focus elements\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [tooltipOpen, setTooltipOpen] = useState(false);\n  useEffect(() => {\n    const classListObserver = new MutationObserver((entries) => {\n      for (const entry of entries) {\n        if (\n          entry.target === buttonRef.current &&\n          entry.target instanceof HTMLElement\n        ) {\n          if (entry.target.classList.contains(virtualFocus.neutral)) {\n            setTooltipOpen(true);\n          } else {\n            setTooltipOpen(false);\n          }\n        }\n      }\n    });\n    if (buttonRef.current) {\n      classListObserver.observe(buttonRef.current, {\n        attributes: true,\n        attributeFilter: ['class'],\n      });\n    }\n\n    return () => {\n      classListObserver.disconnect();\n    };\n  }, []);\n\n  if (!canPin) {\n    return null;\n  }\n\n  return (\n    <Tooltip\n      open={!disabled && tooltipOpen}\n      onOpenChange={setTooltipOpen}\n      placement={placement}\n      fallbackPlacements={fallbackPlacements}\n      text={ariaDisabled ? disabledTooltip : pinUnpinTooltip}\n    >\n      <Button\n        size={size}\n        role={role}\n        ref={buttonRef}\n        id={id}\n        disabled={disabled}\n        {...remainingProps}\n        data-suggestion-pin\n        // When the pin button is rendered in the filter field suffix buttons, aria-selected is not a valid attribute\n        // and needs to be omitted to avoid a11y violations.\n        {...(role === 'option'\n          ? {\n              'aria-selected': focusedListItem?.id === id,\n              'aria-checked': isPinned,\n            }\n          : { 'aria-pressed': isPinned })}\n        aria-label={ariaDisabled ? disabledTooltip : pinUnpinLabel}\n        aria-disabled={ariaDisabledProps || ariaDisabled}\n        color={showError ? 'critical' : 'neutral'}\n        className={clsx(\n          className,\n          getVirtualFocusStyles(focusedListItem?.id === id).className,\n        )}\n        // Need to prevent onPointerDown here in order to prevent the suggestion to be applied by bubbling pointer events.\n        onPointerDown={(event: ReactPointerEvent<HTMLButtonElement>) => {\n          event.preventDefault();\n          event.stopPropagation();\n          event.nativeEvent.stopImmediatePropagation();\n        }}\n        onClick={() => {\n          if (ariaDisabled) {\n            return;\n          }\n          if (isPinned) {\n            unpinFilter(filterString);\n          } else {\n            pinFilter(filterString);\n          }\n        }}\n      >\n        {isPinned ? <PinOffIcon /> : <PinIcon />}\n      </Button>\n    </Tooltip>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type PointerEvent as ReactPointerEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PinIcon, PinOffIcon } from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../buttons/button/Button.js';\nimport { virtualFocus } from '../../../core/styles/virtualFocus.sty.js';\nimport { getVirtualFocusStyles } from '../../../core/utils/getVirtualFocusStyles.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport { FilterFieldContext } from '../contexts/FilterFieldContext.js';\nimport {\n  usePinnedFilterMutation,\n  usePinnedFilters,\n} from '../hooks/recent-and-pinned/usePinnedFilters.js';\nimport { useFilterFieldContext } from '../hooks/useFilterFieldContext.js';\nimport { filterFieldMessages } from '../messages.js';\n\nexport function useSuggestionPin(filterString: string) {\n  const { filterNamespace } = useContext(FilterFieldContext);\n\n  const { filters: pinnedFilters, canPin } = usePinnedFilters(filterNamespace);\n\n  const { pinFilter, unpinFilter } = usePinnedFilterMutation(filterNamespace);\n\n  const isPinned =\n    pinnedFilters.find(\n      (storedFilter) => storedFilter.filter === filterString.trim(),\n    ) !== undefined;\n\n  return {\n    isPinned,\n    canPin,\n    pinFilter,\n    unpinFilter,\n    limitReached: pinnedFilters.length >= 10,\n  };\n}\n\n/**\n * @internal\n */\nexport function SuggestionPin(\n  props: Readonly<{\n    size?: 'condensed' | 'default';\n    id: string;\n    role?: string;\n    filterString: string;\n    className?: string;\n    placement: 'top' | 'bottom' | 'left' | 'right';\n    fallbackPlacements: Array<'top' | 'bottom' | 'left' | 'right'>;\n    disabled?: boolean;\n    'aria-disabled'?: boolean;\n    showError?: boolean;\n  }>,\n) {\n  const {\n    id,\n    filterString,\n    className,\n    size,\n    placement,\n    fallbackPlacements,\n    role,\n    disabled,\n    'aria-disabled': ariaDisabledProps,\n    showError,\n    ...remainingProps\n  } = props;\n\n  const intl = useIntl();\n\n  const { focusedListItem } = useFilterFieldContext();\n\n  const { isPinned, canPin, pinFilter, unpinFilter, limitReached } =\n    useSuggestionPin(filterString);\n\n  const pinUnpinTooltip = intl.formatMessage(\n    filterFieldMessages.suggestions.pinUnpinTooltip,\n    { isPinned },\n  );\n  const pinUnpinLabel = intl.formatMessage(\n    filterFieldMessages.suggestions.pinUnpinLabel,\n    { isPinned, filterString },\n  );\n  const disabledTooltip = intl.formatMessage(\n    filterFieldMessages.suggestions.pinUnpinLimitTooltip,\n  );\n\n  const ariaDisabled = limitReached && !isPinned;\n\n  // Handle tooltips for virtual focus elements\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [tooltipOpen, setTooltipOpen] = useState(false);\n  useEffect(() => {\n    const classListObserver = new MutationObserver((entries) => {\n      for (const entry of entries) {\n        if (\n          entry.target === buttonRef.current &&\n          entry.target instanceof HTMLElement\n        ) {\n          if (entry.target.classList.contains(virtualFocus.neutral)) {\n            setTooltipOpen(true);\n          } else {\n            setTooltipOpen(false);\n          }\n        }\n      }\n    });\n    if (buttonRef.current) {\n      classListObserver.observe(buttonRef.current, {\n        attributes: true,\n        attributeFilter: ['class'],\n      });\n    }\n\n    return () => {\n      classListObserver.disconnect();\n    };\n  }, []);\n\n  if (!canPin) {\n    return null;\n  }\n\n  return (\n    <Tooltip\n      open={!disabled && tooltipOpen}\n      onOpenChange={setTooltipOpen}\n      placement={placement}\n      fallbackPlacements={fallbackPlacements}\n      text={ariaDisabled ? disabledTooltip : pinUnpinTooltip}\n    >\n      <Button\n        size={size}\n        role={role}\n        ref={buttonRef}\n        id={id}\n        disabled={disabled}\n        {...remainingProps}\n        data-suggestion-pin\n        // When the pin button is rendered in the filter field suffix buttons, aria-selected is not a valid attribute\n        // and needs to be omitted to avoid a11y violations.\n        {...(role === 'option'\n          ? {\n              'aria-selected': focusedListItem?.id === id,\n              'aria-checked': isPinned,\n            }\n          : { 'aria-pressed': isPinned })}\n        aria-label={ariaDisabled ? disabledTooltip : pinUnpinLabel}\n        aria-disabled={ariaDisabledProps || ariaDisabled}\n        color={showError ? 'critical' : 'neutral'}\n        className={clsx(\n          className,\n          getVirtualFocusStyles(focusedListItem?.id === id).className,\n        )}\n        // Need to prevent onPointerDown here in order to prevent the suggestion to be applied by bubbling pointer events.\n        onPointerDown={(event: ReactPointerEvent<HTMLButtonElement>) => {\n          event.preventDefault();\n          event.stopPropagation();\n          event.nativeEvent.stopImmediatePropagation();\n        }}\n        onClick={() => {\n          if (ariaDisabled) {\n            return;\n          }\n          if (isPinned) {\n            unpinFilter(filterString);\n          } else {\n            pinFilter(filterString);\n          }\n        }}\n      >\n        {isPinned ? <PinOffIcon /> : <PinIcon />}\n      </Button>\n    </Tooltip>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/filters/filter-field/suggestions/SuggestionTips.css

@@ -1,22 +1,22 @@
-._1dx7u80-3-7-0 {
-  --_1igzksy0-3-7-0: var(--dt-borders-radius-surface-subdued, 9px);
+._1dx7u80-3-8-0 {
+  --_1igzksy0-3-8-0: var(--dt-borders-radius-surface-subdued, 9px);
 }
-._1dx7u81-3-7-0 {
+._1dx7u81-3-8-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   flex: 1;
 }
-._1dx7u82-3-7-0 {
+._1dx7u82-3-8-0 {
   width: 100%;
   overflow: hidden;
   transform-origin: center;
 }
-._1dx7u84-3-7-0 {
+._1dx7u84-3-8-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-@container _ssu5rt0-3-7-0 (max-width: 289px) {
-  ._1dx7u83-3-7-0 {
+@container _ssu5rt0-3-8-0 (max-width: 289px) {
+  ._1dx7u83-3-8-0 {
     flex-direction: column;
     width: 100%;
   }

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

@@ -1,10 +1,10 @@
 import "./SuggestionsOverlay.css";
 import "./SuggestionTips.css";
-var docsLink = "_1dx7u84-3-7-0";
-var suggestionTips = "_1dx7u80-3-7-0";
-var suggestionTipsContent = "_1dx7u83-3-7-0";
-var suggestionTipsWrapper = "_1dx7u82-3-7-0";
-var suggstionTipsEllipsis = "_1dx7u81-3-7-0";
+var docsLink = "_1dx7u84-3-8-0";
+var suggestionTips = "_1dx7u80-3-8-0";
+var suggestionTipsContent = "_1dx7u83-3-8-0";
+var suggestionTipsWrapper = "_1dx7u82-3-8-0";
+var suggstionTipsEllipsis = "_1dx7u81-3-8-0";
 export {
   docsLink,
   suggestionTips,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/suggestions/SuggestionTips.css.ts"],
-  "sourcesContent": ["import './SuggestionsOverlay.css';\nimport './SuggestionTips.css';\nexport var docsLink = '_1dx7u84-3-7-0';\nexport var suggestionTips = '_1dx7u80-3-7-0';\nexport var suggestionTipsContent = '_1dx7u83-3-7-0';\nexport var suggestionTipsWrapper = '_1dx7u82-3-7-0';\nexport var suggstionTipsEllipsis = '_1dx7u81-3-7-0';"],
+  "sourcesContent": ["import './SuggestionsOverlay.css';\nimport './SuggestionTips.css';\nexport var docsLink = '_1dx7u84-3-8-0';\nexport var suggestionTips = '_1dx7u80-3-8-0';\nexport var suggestionTipsContent = '_1dx7u83-3-8-0';\nexport var suggestionTipsWrapper = '_1dx7u82-3-8-0';\nexport var suggstionTipsEllipsis = '_1dx7u81-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,WAAW;AACf,IAAI,iBAAiB;AACrB,IAAI,wBAAwB;AAC5B,IAAI,wBAAwB;AAC5B,IAAI,wBAAwB;",
   "names": []
 }