@dynatrace/strato-components 3.11.2 → 3.11.4

package/content/progress/ProgressCircle.css

@@ -1,4 +1,4 @@
-@keyframes _kvldjh3-3-11-2 {
+@keyframes _kvldjh3-3-11-4 {
   0% {
     transform: rotate(0deg);
   }
@@ -6,79 +6,79 @@
     transform: rotate(360deg);
   }
 }
-._kvldjh4-3-11-2 {
+._kvldjh4-3-11-4 {
   display: inline-block;
 }
-._kvldjh5-3-11-2 {
+._kvldjh5-3-11-4 {
   display: block;
   transform: rotate(-90deg);
 }
-._kvldjh6-3-11-2 {
-  stroke: var(--_kvldjh2-3-11-2);
+._kvldjh6-3-11-4 {
+  stroke: var(--_kvldjh2-3-11-4);
   transform-origin: center;
 }
-._kvldjh7-3-11-2 {
+._kvldjh7-3-11-4 {
   stroke-dasharray: 90 360;
   transform-origin: 50% 50%;
-  animation-name: _kvldjh3-3-11-2;
+  animation-name: _kvldjh3-3-11-4;
   animation-duration: var(--dt-timings-slowest-moderate, 1200ms);
   animation-timing-function: cubic-bezier(0.5, 0.15, 0.5, 0.8);
   animation-iteration-count: infinite;
 }
-._kvldjh8-3-11-2 {
+._kvldjh8-3-11-4 {
   animation-duration: var(--dt-timings-fast-moderate, 200ms);
   transition-property: stroke-dashoffset;
 }
-._kvldjh9-3-11-2 {
-  stroke: var(--_kvldjh1-3-11-2);
+._kvldjh9-3-11-4 {
+  stroke: var(--_kvldjh1-3-11-4);
 }
-._kvldjha-3-11-2 {
+._kvldjha-3-11-4 {
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: var(--_kvldjh0-3-11-2);
+  color: var(--_kvldjh0-3-11-4);
 }
-._kvldjhb-3-11-2 {
+._kvldjhb-3-11-4 {
   gap: var(--dt-spacings-size-8, 8px);
 }
-._kvldjhc-3-11-2 {
+._kvldjhc-3-11-4 {
   gap: var(--dt-spacings-size-12, 12px);
 }
-._kvldjhd-3-11-2 {
-  --_kvldjh2-3-11-2: var(--dt-colors-border-critical-accent, #bb0731);
+._kvldjhd-3-11-4 {
+  --_kvldjh2-3-11-4: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._kvldjhe-3-11-2 {
-  --_kvldjh2-3-11-2: var(--dt-colors-border-neutral-accent, #595a7d);
+._kvldjhe-3-11-4 {
+  --_kvldjh2-3-11-4: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._kvldjhf-3-11-2 {
-  --_kvldjh2-3-11-2: var(--dt-colors-border-primary-accent, #464cce);
+._kvldjhf-3-11-4 {
+  --_kvldjh2-3-11-4: var(--dt-colors-border-primary-accent, #464cce);
 }
-._kvldjhg-3-11-2 {
-  --_kvldjh2-3-11-2: var(--dt-colors-border-success-accent, #2d6761);
+._kvldjhg-3-11-4 {
+  --_kvldjh2-3-11-4: var(--dt-colors-border-success-accent, #2d6761);
 }
-._kvldjhh-3-11-2 {
-  --_kvldjh2-3-11-2: var(--dt-colors-border-warning-accent, #855400);
+._kvldjhh-3-11-4 {
+  --_kvldjh2-3-11-4: var(--dt-colors-border-warning-accent, #855400);
 }
-._kvldjhi-3-11-2 {
-  --_kvldjh0-3-11-2: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_kvldjh1-3-11-2: var(--dt-colors-border-neutral-default, #dadbe4);
+._kvldjhi-3-11-4 {
+  --_kvldjh0-3-11-4: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_kvldjh1-3-11-4: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._kvldjhj-3-11-2 {
-  --_kvldjh0-3-11-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_kvldjh1-3-11-2: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
+._kvldjhj-3-11-4 {
+  --_kvldjh0-3-11-4: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_kvldjh1-3-11-4: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
 }
-._kvldjhk-3-11-2 {
-  --_kvldjh2-3-11-2: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
+._kvldjhk-3-11-4 {
+  --_kvldjh2-3-11-4: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
 }
-._kvldjhl-3-11-2 {
-  --_kvldjh2-3-11-2: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
+._kvldjhl-3-11-4 {
+  --_kvldjh2-3-11-4: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
 }
-._kvldjhm-3-11-2 {
-  --_kvldjh2-3-11-2: var(--dt-colors-border-warning-on-accent-default, #272024);
+._kvldjhm-3-11-4 {
+  --_kvldjh2-3-11-4: var(--dt-colors-border-warning-on-accent-default, #272024);
 }
-._kvldjhn-3-11-2 {
-  --_kvldjh2-3-11-2: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
+._kvldjhn-3-11-4 {
+  --_kvldjh2-3-11-4: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
 }
-._kvldjho-3-11-2 {
-  --_kvldjh2-3-11-2: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+._kvldjho-3-11-4 {
+  --_kvldjh2-3-11-4: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
 }

package/content/progress/ProgressCircle.sty.js

@@ -26,8 +26,8 @@ __export(ProgressCircle_css_exports, {
 module.exports = __toCommonJS(ProgressCircle_css_exports);
 var import_ProgressCircle_css_ts_vanilla = require("./ProgressCircle.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var progressCircleBackgroundCSS = "_kvldjh9-3-11-2";
-var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-3-11-2", variantClassNames: { indeterminate: { true: "_kvldjh7-3-11-2", false: "_kvldjh8-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-3-11-2", variantClassNames: { size: { small: "_kvldjhb-3-11-2", large: "_kvldjhc-3-11-2" }, color: { critical: "_kvldjhd-3-11-2", neutral: "_kvldjhe-3-11-2", primary: "_kvldjhf-3-11-2", success: "_kvldjhg-3-11-2", warning: "_kvldjhh-3-11-2" }, variant: { "default": "_kvldjhi-3-11-2", accent: "_kvldjhj-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-3-11-2"], [{ color: "success", variant: "accent" }, "_kvldjhl-3-11-2"], [{ color: "warning", variant: "accent" }, "_kvldjhm-3-11-2"], [{ color: "critical", variant: "accent" }, "_kvldjhn-3-11-2"], [{ color: "neutral", variant: "accent" }, "_kvldjho-3-11-2"]] });
-var progressCircleRootCSS = "_kvldjh4-3-11-2";
-var progressCircleSvgCss = "_kvldjh5-3-11-2";
+var progressCircleBackgroundCSS = "_kvldjh9-3-11-4";
+var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-3-11-4", variantClassNames: { indeterminate: { true: "_kvldjh7-3-11-4", false: "_kvldjh8-3-11-4" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-3-11-4", variantClassNames: { size: { small: "_kvldjhb-3-11-4", large: "_kvldjhc-3-11-4" }, color: { critical: "_kvldjhd-3-11-4", neutral: "_kvldjhe-3-11-4", primary: "_kvldjhf-3-11-4", success: "_kvldjhg-3-11-4", warning: "_kvldjhh-3-11-4" }, variant: { "default": "_kvldjhi-3-11-4", accent: "_kvldjhj-3-11-4" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-3-11-4"], [{ color: "success", variant: "accent" }, "_kvldjhl-3-11-4"], [{ color: "warning", variant: "accent" }, "_kvldjhm-3-11-4"], [{ color: "critical", variant: "accent" }, "_kvldjhn-3-11-4"], [{ color: "neutral", variant: "accent" }, "_kvldjho-3-11-4"]] });
+var progressCircleRootCSS = "_kvldjh4-3-11-4";
+var progressCircleSvgCss = "_kvldjh5-3-11-4";

package/content/shared-components/Visual.css

@@ -1,4 +1,4 @@
-._9w5efw0-3-11-2 {
+._9w5efw0-3-11-4 {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -11,13 +11,13 @@
   max-width: 100%;
   aspect-ratio: 8 / 5;
 }
-._9w5efw0-3-11-2 img, ._9w5efw0-3-11-2 picture, ._9w5efw0-3-11-2 video {
+._9w5efw0-3-11-4 img, ._9w5efw0-3-11-4 picture, ._9w5efw0-3-11-4 video {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   object-position: center;
 }
-._9w5efw0-3-11-2 figure {
+._9w5efw0-3-11-4 figure {
   margin: 0;
   max-width: 100%;
   max-height: 100%;

package/content/shared-components/Visual.sty.js

@@ -21,4 +21,4 @@ __export(Visual_css_exports, {
 });
 module.exports = __toCommonJS(Visual_css_exports);
 var import_Visual_css_ts_vanilla = require("./Visual.css");
-var VisualOverlayCSS = "_9w5efw0-3-11-2";
+var VisualOverlayCSS = "_9w5efw0-3-11-4";

package/content/skeleton/Skeleton.css

@@ -1,27 +1,27 @@
-._1a1ozfd0-3-11-2 {
+._1a1ozfd0-3-11-4 {
   position: relative;
   overflow: hidden;
 }
-._1a1ozfd1-3-11-2 {
+._1a1ozfd1-3-11-4 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
 }
-._1a1ozfd2-3-11-2 {
+._1a1ozfd2-3-11-4 {
   border-radius: 9999px;
 }
-._1a1ozfd3-3-11-2 {
+._1a1ozfd3-3-11-4 {
   width: 100%;
   height: 100%;
 }
-._1a1ozfd4-3-11-2 stop {
+._1a1ozfd4-3-11-4 stop {
   stop-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a1ozfd5-3-11-2 {
+._1a1ozfd5-3-11-4 {
   width: 100%;
   height: 100%;
   fill: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
 @media (prefers-reduced-motion) {
-  ._1a1ozfd6-3-11-2 {
+  ._1a1ozfd6-3-11-4 {
     display: contents;
   }
 }

package/content/skeleton/Skeleton.sty.js

@@ -26,8 +26,8 @@ __export(Skeleton_css_exports, {
 module.exports = __toCommonJS(Skeleton_css_exports);
 var import_Skeleton_css_ts_vanilla = require("./Skeleton.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-3-11-2", variantClassNames: { variant: { "default": "_1a1ozfd1-3-11-2", rounded: "_1a1ozfd2-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
-var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-11-2";
-var skeletonSvgCSS = "_1a1ozfd3-3-11-2";
-var skeletonSvgGradientCSS = "_1a1ozfd4-3-11-2";
-var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-11-2";
+var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-3-11-4", variantClassNames: { variant: { "default": "_1a1ozfd1-3-11-4", rounded: "_1a1ozfd2-3-11-4" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-11-4";
+var skeletonSvgCSS = "_1a1ozfd3-3-11-4";
+var skeletonSvgGradientCSS = "_1a1ozfd4-3-11-4";
+var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-11-4";

package/content/terminology-overlay/TerminologyOverlay.css

@@ -1,4 +1,4 @@
-._1dd8zuz0-3-11-2 {
+._1dd8zuz0-3-11-4 {
   border: none;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   padding: var(--dt-spacings-size-0, 0);
@@ -16,13 +16,13 @@
   text-decoration-color: var(--dt-colors-border-neutral-accent, #595a7d);
   transition: background-color var(--dt-animations-hover-duration-base, 150ms) var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._1dd8zuz0-3-11-2:hover {
+._1dd8zuz0-3-11-4:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1dd8zuz0-3-11-2:active {
+._1dd8zuz0-3-11-4:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1dd8zuz0-3-11-2:not(.strato-focus-visible) {
+._1dd8zuz0-3-11-4:not(.strato-focus-visible) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }

package/content/terminology-overlay/TerminologyOverlay.sty.js

@@ -21,4 +21,4 @@ __export(TerminologyOverlay_css_exports, {
 });
 module.exports = __toCommonJS(TerminologyOverlay_css_exports);
 var import_TerminologyOverlay_css_ts_vanilla = require("./TerminologyOverlay.css");
-var trigger = "_1dd8zuz0-3-11-2";
+var trigger = "_1dd8zuz0-3-11-4";

package/core/components/app-root/AppRoot.css

@@ -118,7 +118,7 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   font-family: Roboto Mono;
 }
-:root[data-theme="light"]._1jgl8s50-3-11-2 {
+:root[data-theme="light"]._1jgl8s50-3-11-4 {
   --dt-box-shadows-surface-flat-rest: var(--_vr-10);
   --dt-box-shadows-surface-flat-hover: var(--_vr-20);
   --dt-box-shadows-surface-flat-active: var(--_vr-10);
@@ -454,7 +454,7 @@
   --_vr-40: var(--_vr-shadow-1), var(--_vr-shadow-2-40), var(--_vr-shadow-0);
   --_vr-50: var(--_vr-shadow-1), var(--_vr-shadow-2-50), var(--_vr-shadow-0);
 }
-:root[data-theme="dark"]._1jgl8s50-3-11-2 {
+:root[data-theme="dark"]._1jgl8s50-3-11-4 {
   --dt-box-shadows-surface-flat-hover: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 4px 14px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);
   --dt-box-shadows-surface-flat-active: var(--_vr-10);
   --dt-box-shadows-surface-flat-drag: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 13px 17px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);

package/core/components/app-root/AppRoot.sty.js

@@ -21,4 +21,4 @@ __export(AppRoot_css_exports, {
 });
 module.exports = __toCommonJS(AppRoot_css_exports);
 var import_AppRoot_css_ts_vanilla = require("./AppRoot.css");
-var dtVisualRefreshEnabled = "_1jgl8s50-3-11-2";
+var dtVisualRefreshEnabled = "_1jgl8s50-3-11-4";

package/core/components/visually-hidden/VisuallyHidden.css

@@ -1,4 +1,4 @@
-._1xz8nhz0-3-11-2 {
+._1xz8nhz0-3-11-4 {
   width: 0;
   height: 0;
   opacity: 0;

package/core/components/visually-hidden/VisuallyHidden.sty.js

@@ -21,4 +21,4 @@ __export(VisuallyHidden_css_exports, {
 });
 module.exports = __toCommonJS(VisuallyHidden_css_exports);
 var import_VisuallyHidden_css_ts_vanilla = require("./VisuallyHidden.css");
-var visuallyHidden = "_1xz8nhz0-3-11-2";
+var visuallyHidden = "_1xz8nhz0-3-11-4";

package/core/sdk/app-state/AppStateContext.d.ts

@@ -20,6 +20,18 @@ export interface AppStateContextValue {
     scope: 'user' | 'app';
     queryClient: QueryClient;
 }
+/**
+ * Resets the default store's per-key tracking. Call in test `beforeEach` to
+ * prevent state pollution across tests that use the no-provider code path.
+ * @internal
+ */
+export declare function _resetDefaultStore(): void;
+/**
+ * QueryClient used by the default context (no AppStateProvider). Exported so
+ * test helpers can call `.clear()` between tests to avoid stale-cache pollution.
+ * @internal
+ */
+export declare const _defaultQueryClient: QueryClient;
 /**
  * @internal
  */

package/core/sdk/app-state/AppStateContext.js

@@ -18,6 +18,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var AppStateContext_exports = {};
 __export(AppStateContext_exports, {
   AppStateContext: () => AppStateContext,
+  _defaultQueryClient: () => _defaultQueryClient,
+  _resetDefaultStore: () => _resetDefaultStore,
   queryClientConfig: () => queryClientConfig
 });
 module.exports = __toCommonJS(AppStateContext_exports);
@@ -38,8 +40,19 @@ const queryClientConfig = {
 };
 const defaultStore = (0, import_app_state_store.createAppStateStore)();
 defaultStore.setState({ isLoading: false });
+function _resetDefaultStore() {
+  defaultStore.setState({
+    data: {},
+    isLoading: false,
+    error: null,
+    fetchedKeys: /* @__PURE__ */ new Set(),
+    keyErrors: {},
+    deletingKeys: /* @__PURE__ */ new Set()
+  });
+}
+const _defaultQueryClient = new import_react_query.QueryClient(queryClientConfig);
 const AppStateContext = (0, import_react.createContext)({
   store: defaultStore,
   scope: "user",
-  queryClient: new import_react_query.QueryClient(queryClientConfig)
+  queryClient: _defaultQueryClient
 });

package/core/sdk/app-state/AppStateProvider.js

@@ -50,12 +50,19 @@ function AppStateLoader() {
   (0, import_react.useLayoutEffect)(() => {
     if (data !== void 0) {
       const flattened = {};
+      const fetchedKeys = /* @__PURE__ */ new Set();
       for (const item of data) {
+        fetchedKeys.add(item.key);
         if (item.value !== void 0) {
           flattened[item.key] = item.value;
         }
       }
-      store.setState({ data: flattened, isLoading: false, error: null });
+      store.setState({
+        data: flattened,
+        isLoading: false,
+        error: null,
+        fetchedKeys
+      });
     }
   }, [data, store]);
   (0, import_react.useLayoutEffect)(() => {

package/core/sdk/app-state/app-state-store.d.ts

@@ -6,6 +6,9 @@ export type AppStateStore = {
     data: Record<string, string>;
     isLoading: boolean;
     error: Error | null;
+    fetchedKeys: ReadonlySet<string>;
+    keyErrors: Record<string, Error>;
+    deletingKeys: ReadonlySet<string>;
     onError?: (error: Error) => void;
 };
 /**

package/core/sdk/app-state/app-state-store.js

@@ -25,6 +25,9 @@ function createAppStateStore() {
   return (0, import_zustand.createStore)(() => ({
     data: {},
     isLoading: true,
-    error: null
+    error: null,
+    fetchedKeys: /* @__PURE__ */ new Set(),
+    keyErrors: {},
+    deletingKeys: /* @__PURE__ */ new Set()
   }));
 }

package/core/sdk/app-state/useAppStateInternal.js

@@ -22,6 +22,7 @@ __export(useAppStateInternal_exports, {
   userScopedMutateFns: () => userScopedMutateFns
 });
 module.exports = __toCommonJS(useAppStateInternal_exports);
+var import_react_query = require("@tanstack/react-query");
 var import_zustand = require("zustand");
 var import_app_environment = require("@dynatrace-sdk/app-environment");
 var import_client_state = require("@dynatrace-sdk/client-state");
@@ -64,15 +65,72 @@ const appScopedMutateFns = {
 };
 function useAppStateInternal(key, mutateFns, { store: activeStore, scope, queryClient }) {
   const rawValue = (0, import_zustand.useStore)(activeStore, (s) => s.data[key]);
-  const isLoading = (0, import_zustand.useStore)(activeStore, (s) => s.isLoading);
-  const error = (0, import_zustand.useStore)(activeStore, (s) => s.error);
+  const fetchedKeys = (0, import_zustand.useStore)(activeStore, (s) => s.fetchedKeys);
+  const keyErrors = (0, import_zustand.useStore)(activeStore, (s) => s.keyErrors);
+  const storeIsLoading = (0, import_zustand.useStore)(activeStore, (s) => s.isLoading);
+  const bulkError = (0, import_zustand.useStore)(activeStore, (s) => s.error);
+  const isFetched = fetchedKeys.has(key);
+  const keyError = keyErrors[key] ?? null;
+  const needsIndividualFetch = !isFetched && keyError === null && !storeIsLoading && bulkError === null;
+  const { isLoading: isKeyFetchLoading } = (0, import_react_query.useQuery)(
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
+    {
+      queryKey: ["app-state", scope, key],
+      // Sync directly into the Zustand store inside the async queryFn so no
+      // effects are needed. onSuccess/onError callbacks were removed in
+      // TanStack Query v5; this is the recommended alternative.
+      queryFn: async ({ signal }) => {
+        try {
+          const result = scope === "user" ? await import_client_state.stateClient.getUserAppState({ key, abortSignal: signal }) : await import_client_state.stateClient.getAppState({ key, abortSignal: signal });
+          activeStore.setState((s) => {
+            if (s.deletingKeys.has(key)) {
+              return {};
+            }
+            const update = { fetchedKeys: /* @__PURE__ */ new Set([...s.fetchedKeys, key]) };
+            if (result.value !== void 0) {
+              update.data = { ...s.data, [key]: result.value };
+            }
+            return update;
+          });
+          return result;
+        } catch (error2) {
+          if (!(error2 instanceof Error)) {
+            throw error2;
+          }
+          if (error2.name === "AbortError") {
+            throw error2;
+          }
+          if ((0, import_client_state.isNotFound)(error2)) {
+            activeStore.setState((s) => ({
+              fetchedKeys: /* @__PURE__ */ new Set([...s.fetchedKeys, key])
+            }));
+            return null;
+          }
+          activeStore.setState((s) => ({
+            keyErrors: { ...s.keyErrors, [key]: error2 }
+          }));
+          if (!(0, import_client_state.isForbidden)(error2) && !(0, import_client_state.isUnauthorized)(error2)) {
+            activeStore.getState().onError?.(error2);
+          }
+          throw error2;
+        }
+      },
+      enabled: needsIndividualFetch,
+      throwOnError: false
+    },
+    queryClient
+  );
+  const isLoading = storeIsLoading || needsIndividualFetch && isKeyFetchLoading;
   const value = rawValue !== void 0 ? JSON.parse(rawValue) : void 0;
+  const error = keyError ?? bulkError;
   async function set(newValue, options) {
-    const cached = queryClient.getQueryData([
+    const bulkCached = queryClient.getQueryData(["app-state", scope])?.find((item) => item.key === key)?.value;
+    const perKeyCached = queryClient.getQueryData([
       "app-state",
-      scope
-    ])?.find((item) => item.key === key)?.value;
-    const previous = cached ?? activeStore.getState().data[key];
+      scope,
+      key
+    ])?.value;
+    const previous = bulkCached ?? activeStore.getState().data[key] ?? perKeyCached;
     let updatedValue;
     if (typeof newValue === "function") {
       const currentValue = previous !== void 0 ? JSON.parse(previous) : void 0;
@@ -82,7 +140,10 @@ function useAppStateInternal(key, mutateFns, { store: activeStore, scope, queryC
     }
     try {
       const serialized = JSON.stringify(updatedValue);
-      activeStore.setState((s) => ({ data: { ...s.data, [key]: serialized } }));
+      activeStore.setState((s) => ({
+        data: { ...s.data, [key]: serialized },
+        fetchedKeys: /* @__PURE__ */ new Set([...s.fetchedKeys, key])
+      }));
       await mutateFns.set(key, serialized, options?.validUntilTime);
       queryClient.setQueryData(
         ["app-state", scope],
@@ -117,10 +178,14 @@ function useAppStateInternal(key, mutateFns, { store: activeStore, scope, queryC
     activeStore.setState((s) => {
       const next = { ...s.data };
       delete next[key];
-      return { data: next };
+      return {
+        data: next,
+        deletingKeys: /* @__PURE__ */ new Set([...s.deletingKeys, key])
+      };
     });
     try {
       await mutateFns.remove(key);
+      queryClient.removeQueries({ queryKey: ["app-state", scope, key] });
       queryClient.setQueryData(
         ["app-state", scope],
         (old) => {
@@ -131,10 +196,14 @@ function useAppStateInternal(key, mutateFns, { store: activeStore, scope, queryC
         }
       );
     } catch (err) {
-      if (previous !== void 0) {
-        activeStore.setState((s) => ({
-          data: { ...s.data, [key]: previous }
-        }));
+      activeStore.setState((s) => {
+        const deletingKeys = new Set(s.deletingKeys);
+        deletingKeys.delete(key);
+        const data = previous !== void 0 ? { ...s.data, [key]: previous } : s.data;
+        return { deletingKeys, data };
+      });
+      if (previous === void 0) {
+        queryClient.removeQueries({ queryKey: ["app-state", scope, key] });
       }
       activeStore.getState().onError?.(err);
     }

package/core/sdk/sdk-logger.js

@@ -40,7 +40,7 @@ const LOGGER_FACTORY = /* @__PURE__ */ (() => {
         context: {
           id: "@dynatrace/strato-design-system",
           // @ts-expect-error Global variable injected at package build time
-          version: "3.11.2"
+          version: "3.11.4"
         }
       });
     } else if (supportsLoggerV1()) {
@@ -48,7 +48,7 @@ const LOGGER_FACTORY = /* @__PURE__ */ (() => {
         context: {
           id: "@dynatrace/strato-design-system",
           // @ts-expect-error Global variable injected at package build time
-          version: "3.11.2"
+          version: "3.11.4"
         }
       });
     }

package/core/styles/defaultChartValues.css

@@ -1,4 +1,4 @@
-._1rtjj3o0-3-11-2 {
+._1rtjj3o0-3-11-4 {
   line-height: normal;
   width: inherit;
 }

package/core/styles/defaultChartValues.sty.js

@@ -21,4 +21,4 @@ __export(defaultChartValues_css_exports, {
 });
 module.exports = __toCommonJS(defaultChartValues_css_exports);
 var import_defaultChartValues_css_ts_vanilla = require("./defaultChartValues.css");
-var defaultChartSize = "_1rtjj3o0-3-11-2";
+var defaultChartSize = "_1rtjj3o0-3-11-4";