@dynatrace/strato-components 3.7.0 → 3.8.0

package/content/shared-components/Visual.css

@@ -1,4 +1,4 @@
-._9w5efw0-3-7-0 {
+._9w5efw0-3-8-0 {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -11,13 +11,13 @@
   max-width: 100%;
   aspect-ratio: 8 / 5;
 }
-._9w5efw0-3-7-0 img, ._9w5efw0-3-7-0 picture, ._9w5efw0-3-7-0 video {
+._9w5efw0-3-8-0 img, ._9w5efw0-3-8-0 picture, ._9w5efw0-3-8-0 video {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   object-position: center;
 }
-._9w5efw0-3-7-0 figure {
+._9w5efw0-3-8-0 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-7-0";
+var VisualOverlayCSS = "_9w5efw0-3-8-0";

package/content/skeleton/Skeleton.css

@@ -1,27 +1,27 @@
-._1a1ozfd0-3-7-0 {
+._1a1ozfd0-3-8-0 {
   position: relative;
   overflow: hidden;
 }
-._1a1ozfd1-3-7-0 {
+._1a1ozfd1-3-8-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
 }
-._1a1ozfd2-3-7-0 {
+._1a1ozfd2-3-8-0 {
   border-radius: 9999px;
 }
-._1a1ozfd3-3-7-0 {
+._1a1ozfd3-3-8-0 {
   width: 100%;
   height: 100%;
 }
-._1a1ozfd4-3-7-0 stop {
+._1a1ozfd4-3-8-0 stop {
   stop-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a1ozfd5-3-7-0 {
+._1a1ozfd5-3-8-0 {
   width: 100%;
   height: 100%;
   fill: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
 @media (prefers-reduced-motion) {
-  ._1a1ozfd6-3-7-0 {
+  ._1a1ozfd6-3-8-0 {
     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-7-0", variantClassNames: { variant: { "default": "_1a1ozfd1-3-7-0", rounded: "_1a1ozfd2-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
-var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-7-0";
-var skeletonSvgCSS = "_1a1ozfd3-3-7-0";
-var skeletonSvgGradientCSS = "_1a1ozfd4-3-7-0";
-var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-7-0";
+var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-3-8-0", variantClassNames: { variant: { "default": "_1a1ozfd1-3-8-0", rounded: "_1a1ozfd2-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-8-0";
+var skeletonSvgCSS = "_1a1ozfd3-3-8-0";
+var skeletonSvgGradientCSS = "_1a1ozfd4-3-8-0";
+var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-8-0";

package/content/terminology-overlay/TerminologyOverlay.css

@@ -1,4 +1,4 @@
-._1dd8zuz0-3-7-0 {
+._1dd8zuz0-3-8-0 {
   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-7-0:hover {
+._1dd8zuz0-3-8-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1dd8zuz0-3-7-0:active {
+._1dd8zuz0-3-8-0:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1dd8zuz0-3-7-0:not(.strato-focus-visible) {
+._1dd8zuz0-3-8-0: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-7-0";
+var trigger = "_1dd8zuz0-3-8-0";

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-7-0 {
+:root[data-theme="light"]._1jgl8s50-3-8-0 {
   --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);
@@ -163,6 +163,7 @@
   --dt-colors-theme-background-shell-default: #f4f4f6;
   --dt-colors-theme-background-base-default: #fafafb;
   --dt-colors-theme-background-surface-backdrop: #38384266;
+  --dt-colors-theme-background-surface-backdrop-embedded: #fafafbcc;
   --dt-colors-theme-background-surface-default: #fff;
   --dt-colors-theme-background-container-neutral-subdued: #fafafb;
   --dt-colors-theme-neutral-10: #f4f4f6;
@@ -212,6 +213,7 @@
   --dt-colors-theme-critical-90: #b50019;
   --dt-colors-background-base-default: #fafafb;
   --dt-colors-background-surface-backdrop: color-mix(in srgb, var(--dt-colors-theme-foreground-10) 40%, transparent);
+  --dt-colors-background-surface-backdrop-embedded: color-mix(in srgb, var(--dt-colors-theme-background-10) 80%, transparent);
   --dt-colors-background-surface-default: #fff;
   --dt-colors-background-container-neutral-subdued: #fafafb;
   --dt-colors-background-container-neutral-default: #f4f4f6;
@@ -451,7 +453,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-7-0 {
+:root[data-theme="dark"]._1jgl8s50-3-8-0 {
   --dt-box-shadows-surface-flat-hover: var(--_vr-20);
   --dt-box-shadows-surface-flat-active: var(--_vr-10);
   --dt-box-shadows-surface-flat-drag: var(--_vr-50);
@@ -495,6 +497,7 @@
   --dt-colors-theme-background-shell-default: #141419;
   --dt-colors-theme-background-base-default: #16161d;
   --dt-colors-theme-background-surface-backdrop: #16161dcc;
+  --dt-colors-theme-background-surface-backdrop-embedded: #16161dcc;
   --dt-colors-theme-background-surface-default: #1b1b22;
   --dt-colors-theme-background-container-neutral-subdued: #16161d;
   --dt-colors-theme-neutral-10: #1f1f26;
@@ -544,6 +547,7 @@
   --dt-colors-theme-critical-90: #a30014;
   --dt-colors-background-base-default: var(--dt-colors-theme-background-20);
   --dt-colors-background-surface-backdrop: color-mix(in srgb, var(--dt-colors-theme-foreground-20) 80%, transparent);
+  --dt-colors-background-surface-backdrop-embedded: color-mix(in srgb, var(--dt-colors-theme-background-20) 80%, transparent);
   --dt-colors-background-surface-default: var(--dt-colors-theme-background-10);
   --dt-colors-background-container-neutral-subdued: var(--dt-colors-theme-background-20);
   --dt-colors-background-container-neutral-default: #1f1f26;
@@ -844,6 +848,7 @@
   --dt-colors-theme-background-10: #f9f9fa;
   --dt-colors-theme-background-20: #fff;
   --dt-colors-theme-background-shell-default: #f2f2f5;
+  --dt-colors-theme-background-surface-backdrop-embedded: #f9f9facc;
   --dt-colors-theme-neutral-10: #f2f2f5;
   --dt-colors-theme-neutral-20: #ebecf0;
   --dt-colors-theme-neutral-30: #e4e5eb;
@@ -891,6 +896,7 @@
   --dt-colors-theme-critical-90: #a2001d;
   --dt-colors-background-base-default: #f9f9fa;
   --dt-colors-background-surface-backdrop: #f9f9facc;
+  --dt-colors-background-surface-backdrop-embedded: #f9f9facc;
   --dt-colors-background-surface-default: #fff;
   --dt-colors-background-container-neutral-subdued: #f9f9fa;
   --dt-colors-background-container-neutral-default: #f2f2f5;
@@ -1708,6 +1714,7 @@
   --dt-colors-theme-background-10: #19192c;
   --dt-colors-theme-background-20: #112;
   --dt-colors-theme-background-shell-default: #141419;
+  --dt-colors-theme-background-surface-backdrop-embedded: #112c;
   --dt-colors-theme-neutral-10: #212135;
   --dt-colors-theme-neutral-20: #292a3e;
   --dt-colors-theme-neutral-30: #323248;
@@ -1755,6 +1762,7 @@
   --dt-colors-theme-critical-90: #a50024;
   --dt-colors-background-base-default: #19192c;
   --dt-colors-background-surface-backdrop: #19192ccc;
+  --dt-colors-background-surface-backdrop-embedded: #112c;
   --dt-colors-background-surface-default: #112;
   --dt-colors-background-container-neutral-subdued: #19192c;
   --dt-colors-background-container-neutral-default: #212135;
@@ -2607,6 +2615,7 @@ body {
     --dt-colors-theme-background-10: #f9f9fa;
     --dt-colors-theme-background-20: #fff;
     --dt-colors-theme-background-shell-default: #f2f2f5;
+    --dt-colors-theme-background-surface-backdrop-embedded: #f9f9facc;
     --dt-colors-theme-neutral-10: #f2f2f5;
     --dt-colors-theme-neutral-20: #ebecf0;
     --dt-colors-theme-neutral-30: #e4e5eb;
@@ -2654,6 +2663,7 @@ body {
     --dt-colors-theme-critical-90: #a2001d;
     --dt-colors-background-base-default: #f9f9fa;
     --dt-colors-background-surface-backdrop: #f9f9facc;
+    --dt-colors-background-surface-backdrop-embedded: #f9f9facc;
     --dt-colors-background-surface-default: #fff;
     --dt-colors-background-container-neutral-subdued: #f9f9fa;
     --dt-colors-background-container-neutral-default: #f2f2f5;

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

@@ -38,8 +38,8 @@ var import_wicg_inert = require("wicg-inert");
 var import_user_preferences = require("@dynatrace-sdk/user-preferences");
 var styles = __toESM(require("./AppRoot.sty.js"));
 var import_useCurrentTheme = require("../../hooks/useCurrentTheme.js");
+var import_useVisualRefreshEnabled = require("../../hooks/useVisualRefreshEnabled.js");
 var import_FocusProvider = require("../../providers/FocusProvider.js");
-var import_is_visual_refresh_enabled = require("../../utils/is-visual-refresh-enabled.js");
 var import_modality = require("../../utils/modality.js");
 (0, import_modality.initModalityDetection)();
 const COMPONENT_NAME = "AppRoot";
@@ -74,8 +74,9 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
         document.documentElement.setAttribute("data-theme", theme);
       }
     }, [theme]);
+    const isVisualRefreshEnabled = (0, import_useVisualRefreshEnabled.useVisualRefreshEnabled)();
     (0, import_react.useLayoutEffect)(() => {
-      if (document !== void 0 && (0, import_is_visual_refresh_enabled.isVisualRefreshEnabled)()) {
+      if (document !== void 0 && isVisualRefreshEnabled) {
         document.documentElement.classList.add(styles.dtVisualRefreshEnabled);
       }
     }, []);

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-7-0";
+var dtVisualRefreshEnabled = "_1jgl8s50-3-8-0";

package/core/components/app-root/visual-refresh-overrides.d.ts

@@ -59,6 +59,7 @@ export declare const vrLightGeneratedOverrides: {
     '--dt-colors-theme-background-shell-default': string;
     '--dt-colors-theme-background-base-default': string;
     '--dt-colors-theme-background-surface-backdrop': string;
+    '--dt-colors-theme-background-surface-backdrop-embedded': string;
     '--dt-colors-theme-background-surface-default': string;
     '--dt-colors-theme-background-container-neutral-subdued': string;
     '--dt-colors-theme-neutral-10': string;
@@ -108,6 +109,7 @@ export declare const vrLightGeneratedOverrides: {
     '--dt-colors-theme-critical-90': string;
     '--dt-colors-background-base-default': string;
     '--dt-colors-background-surface-backdrop': string;
+    '--dt-colors-background-surface-backdrop-embedded': string;
     '--dt-colors-background-surface-default': string;
     '--dt-colors-background-container-neutral-subdued': string;
     '--dt-colors-background-container-neutral-default': string;
@@ -339,6 +341,7 @@ export declare const vrLightGeneratedOverrides: {
 /** Visual refresh colors — light mode. */
 export declare const vrLightColors: {
     '--dt-colors-background-surface-backdrop': string;
+    '--dt-colors-background-surface-backdrop-embedded': string;
     '--dt-colors-background-field-neutral-default': string;
     '--dt-colors-background-field-neutral-default-hover': string;
     '--dt-colors-background-field-neutral-default-active': string;
@@ -405,6 +408,7 @@ export declare const vrDarkGeneratedOverrides: {
     '--dt-colors-theme-background-shell-default': string;
     '--dt-colors-theme-background-base-default': string;
     '--dt-colors-theme-background-surface-backdrop': string;
+    '--dt-colors-theme-background-surface-backdrop-embedded': string;
     '--dt-colors-theme-background-surface-default': string;
     '--dt-colors-theme-background-container-neutral-subdued': string;
     '--dt-colors-theme-neutral-10': string;
@@ -454,6 +458,7 @@ export declare const vrDarkGeneratedOverrides: {
     '--dt-colors-theme-critical-90': string;
     '--dt-colors-background-base-default': string;
     '--dt-colors-background-surface-backdrop': string;
+    '--dt-colors-background-surface-backdrop-embedded': string;
     '--dt-colors-background-surface-default': string;
     '--dt-colors-background-container-neutral-subdued': string;
     '--dt-colors-background-container-neutral-default': string;
@@ -685,6 +690,7 @@ export declare const vrDarkGeneratedOverrides: {
 /** Visual refresh colors — dark mode. */
 export declare const vrDarkColors: {
     '--dt-colors-background-surface-backdrop': string;
+    '--dt-colors-background-surface-backdrop-embedded': string;
     '--dt-colors-background-surface-default': string;
     '--dt-colors-background-base-default': string;
     '--dt-colors-background-container-neutral-subdued': string;

package/core/components/app-root/visual-refresh-overrides.js

@@ -87,6 +87,7 @@ const vrLightGeneratedOverrides = {
   "--dt-colors-theme-background-shell-default": "#f4f4f6",
   "--dt-colors-theme-background-base-default": "#fafafb",
   "--dt-colors-theme-background-surface-backdrop": "#38384266",
+  "--dt-colors-theme-background-surface-backdrop-embedded": "#fafafbcc",
   "--dt-colors-theme-background-surface-default": "#fff",
   "--dt-colors-theme-background-container-neutral-subdued": "#fafafb",
   "--dt-colors-theme-neutral-10": "#f4f4f6",
@@ -136,6 +137,7 @@ const vrLightGeneratedOverrides = {
   "--dt-colors-theme-critical-90": "#b50019",
   "--dt-colors-background-base-default": "#fafafb",
   "--dt-colors-background-surface-backdrop": "#38384266",
+  "--dt-colors-background-surface-backdrop-embedded": "#fafafbcc",
   "--dt-colors-background-surface-default": "#fff",
   "--dt-colors-background-container-neutral-subdued": "#fafafb",
   "--dt-colors-background-container-neutral-default": "#f4f4f6",
@@ -366,6 +368,7 @@ const vrLightGeneratedOverrides = {
 };
 const vrLightColors = {
   "--dt-colors-background-surface-backdrop": "color-mix(in srgb, var(--dt-colors-theme-foreground-10) 40%, transparent)",
+  "--dt-colors-background-surface-backdrop-embedded": "color-mix(in srgb, var(--dt-colors-theme-background-10) 80%, transparent)",
   "--dt-colors-background-field-neutral-default": "color-mix(in srgb, var(--dt-colors-theme-neutral-20) 0%, transparent)",
   "--dt-colors-background-field-neutral-default-hover": "var(--dt-colors-theme-neutral-20)",
   "--dt-colors-background-field-neutral-default-active": "var(--dt-colors-theme-neutral-30)"
@@ -429,6 +432,7 @@ const vrDarkGeneratedOverrides = {
   "--dt-colors-theme-background-shell-default": "#141419",
   "--dt-colors-theme-background-base-default": "#16161d",
   "--dt-colors-theme-background-surface-backdrop": "#16161dcc",
+  "--dt-colors-theme-background-surface-backdrop-embedded": "#16161dcc",
   "--dt-colors-theme-background-surface-default": "#1b1b22",
   "--dt-colors-theme-background-container-neutral-subdued": "#16161d",
   "--dt-colors-theme-neutral-10": "#1f1f26",
@@ -478,6 +482,7 @@ const vrDarkGeneratedOverrides = {
   "--dt-colors-theme-critical-90": "#a30014",
   "--dt-colors-background-base-default": "#16161d",
   "--dt-colors-background-surface-backdrop": "#16161dcc",
+  "--dt-colors-background-surface-backdrop-embedded": "#16161dcc",
   "--dt-colors-background-surface-default": "#1b1b22",
   "--dt-colors-background-container-neutral-subdued": "#16161d",
   "--dt-colors-background-container-neutral-default": "#1f1f26",
@@ -708,6 +713,7 @@ const vrDarkGeneratedOverrides = {
 };
 const vrDarkColors = {
   "--dt-colors-background-surface-backdrop": "color-mix(in srgb, var(--dt-colors-theme-foreground-20) 80%, transparent)",
+  "--dt-colors-background-surface-backdrop-embedded": "color-mix(in srgb, var(--dt-colors-theme-background-20) 80%, transparent)",
   "--dt-colors-background-surface-default": "var(--dt-colors-theme-background-10)",
   "--dt-colors-background-base-default": "var(--dt-colors-theme-background-20)",
   "--dt-colors-background-container-neutral-subdued": "var(--dt-colors-theme-background-20)"

package/core/components/error-fallback/ErrorFallback.d.ts

@@ -0,0 +1,8 @@
+import type { FallbackProps } from 'react-error-boundary';
+/**
+ * Fallback component shown in place of a component when an unhandled exception
+ * is thrown, so the host app remains functional. Includes a reset button to allow
+ * graceful recovery.
+ * @internal
+ */
+export declare const ErrorFallback: ({ resetErrorBoundary }: FallbackProps) => import("react/jsx-runtime").JSX.Element;

package/{filters/filter-field → core/components}/error-fallback/messages.d.ts

@@ -1,5 +1,4 @@
 /**
- * Error messages shown on error fall-back component
  * @internal
  */
 export declare const errorFallbackMessages: {

package/{filters/filter-field → core/components}/error-fallback/messages.js

@@ -24,12 +24,12 @@ var import_react_intl = require("react-intl");
 const errorFallbackMessages = (0, import_react_intl.defineMessages)({
   errorTitleMessage: {
     defaultMessage: "An error occurred",
-    id: "JYch5LSreqEKVk0q",
-    description: "The message that is shown once the filter field reaches an invalid state when an uncaught exception was thrown"
+    id: "YTE4r9D1o7r/DV13",
+    description: "The message shown when a component reaches an invalid state due to an uncaught exception."
   },
   recoverStateButtonText: {
     defaultMessage: "Reset",
-    id: "IigYU5spaVAkF/1K",
-    description: "Button text for trying to recover the filter field state from an invalid state"
+    id: "n1zi/yl5dOaxTrfN",
+    description: "Button text for trying to recover a component from an invalid state."
   }
 });

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

@@ -1,4 +1,4 @@
-._1xz8nhz0-3-7-0 {
+._1xz8nhz0-3-8-0 {
   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-7-0";
+var visuallyHidden = "_1xz8nhz0-3-8-0";

package/core/dql/dql-common.js

@@ -32,9 +32,8 @@ const dqlCommands = [
   "data",
   "dedup",
   "describe",
+  "execute",
   "expand",
-  "experimentalFieldsSummary",
-  "experimentalLoad",
   "experimentalSave",
   "experimentalTimeChart",
   "failIf",
@@ -43,6 +42,7 @@ const dqlCommands = [
   "fieldsAdd",
   "fieldsFlatten",
   "fieldsKeep",
+  "fieldsMove",
   "fieldsRemove",
   "fieldsRename",
   "fieldsSnapshot",
@@ -53,11 +53,15 @@ const dqlCommands = [
   "internalTimeseriesBins",
   "join",
   "joinNested",
+  "jsonExtract",
   "limit",
   "load",
   "lookup",
   "makeTimeseries",
+  "metrics",
   "parse",
+  "previewExternalList",
+  "previewExternalParse",
   "search",
   "smartscapeEdges",
   "smartscapeNodes",

package/core/hooks/useVisualRefreshEnabled.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @internal
+ */
+export declare function useVisualRefreshEnabled(): boolean;

package/core/hooks/useVisualRefreshEnabled.js

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useVisualRefreshEnabled_exports = {};
+__export(useVisualRefreshEnabled_exports, {
+  useVisualRefreshEnabled: () => useVisualRefreshEnabled
+});
+module.exports = __toCommonJS(useVisualRefreshEnabled_exports);
+var import_react = require("react");
+var import_is_visual_refresh_enabled = require("../utils/is-visual-refresh-enabled.js");
+function useVisualRefreshEnabled() {
+  return (0, import_react.useSyncExternalStore)(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    () => () => globalThis.dtVisualRefreshEnabled,
+    () => (0, import_is_visual_refresh_enabled.isVisualRefreshEnabled)(),
+    () => false
+  );
+}

package/core/index.d.ts

@@ -97,3 +97,6 @@ export { accessValue as _accessValue } from './utils/accessors/access-value.js';
 export type { IntentProps, IntentWithResponseProps, IntentWithoutResponseProps, SuccessRes, ErrorRes, IntentBaseProps, } from './slots/Intent/Intent.js';
 export { Intent } from './slots/Intent/Intent.js';
 export { usePermissions, type PermissionsResult, type PermissionDetail, } from './hooks/usePermissions.js';
+export { useAppState as _useAppState, useUserAppState as _useUserAppState, } from './sdk/app-state/useAppState.js';
+export { useAppStateValue as _useAppStateValue, useUserAppStateValue as _useUserAppStateValue, type UseAppStateValueResult as _UseAppStateValueResult, type UseUserAppStateValueResult as _UseUserAppStateValueResult, } from './sdk/app-state/useAppStateValue.js';
+export type { _SetOptions, _UseAppStateResult, } from './sdk/app-state/useAppStateInternal.js';

package/core/index.js

@@ -51,6 +51,8 @@ __export(core_exports, {
   _mergeProps: () => import_merge_props.mergeProps,
   _parseBoolean: () => import_parse_boolean.parseBoolean,
   _sanitizeSymbol: () => import_sanitize_symbol._sanitizeSymbol,
+  _useAppState: () => import_useAppState.useAppState,
+  _useAppStateValue: () => import_useAppStateValue.useAppStateValue,
   _useAriaLabelingProps: () => import_useAriaLabelingProps.useAriaLabelingProps,
   _useBehavioralTrackingProps: () => import_useBehavioralTrackingProps.useBehavioralTrackingProps,
   _useControllableState: () => import_useControllableState.useControllableState,
@@ -62,6 +64,8 @@ __export(core_exports, {
   _useRequestAnimationFrame: () => import_useRequestAnimationFrame.useRequestAnimationFrame,
   _useSafeForwardProps: () => import_useSafeForwardProps.useSafeForwardProps,
   _useSharedInputPropsContext: () => import_useSharedInputPropsContext.useSharedInputPropsContext,
+  _useUserAppState: () => import_useAppState.useUserAppState,
+  _useUserAppStateValue: () => import_useAppStateValue.useUserAppStateValue,
   createStore: () => import_store.createStore,
   getThresholdColor: () => import_threshold_utils.getThresholdColor,
   isNumber: () => import_type_guards.isNumber,
@@ -139,3 +143,5 @@ var import_download = require("./utils/download.js");
 var import_access_value = require("./utils/accessors/access-value.js");
 var import_Intent = require("./slots/Intent/Intent.js");
 var import_usePermissions = require("./hooks/usePermissions.js");
+var import_useAppState = require("./sdk/app-state/useAppState.js");
+var import_useAppStateValue = require("./sdk/app-state/useAppStateValue.js");

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

@@ -0,0 +1,26 @@
+import { QueryClient } from '@tanstack/react-query';
+import { type StoreApi } from 'zustand';
+import { type AppStateStore } from './app-state-store.js';
+export declare const queryClientConfig: {
+    defaultOptions: {
+        queries: {
+            retry: boolean;
+            staleTime: number;
+        };
+        mutations: {
+            retry: boolean;
+        };
+    };
+};
+/**
+ * @internal
+ */
+export interface AppStateContextValue {
+    store: StoreApi<AppStateStore>;
+    scope: 'user' | 'app';
+    queryClient: QueryClient;
+}
+/**
+ * @internal
+ */
+export declare const AppStateContext: import("react").Context<AppStateContextValue>;

package/{filters/filter-field/contexts/SavedAndRecentQueryClientContext.js → core/sdk/app-state/AppStateContext.js}

@@ -15,23 +15,31 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var SavedAndRecentQueryClientContext_exports = {};
-__export(SavedAndRecentQueryClientContext_exports, {
-  RecentAndSavedFiltersQueryClientContext: () => RecentAndSavedFiltersQueryClientContext
+var AppStateContext_exports = {};
+__export(AppStateContext_exports, {
+  AppStateContext: () => AppStateContext,
+  queryClientConfig: () => queryClientConfig
 });
-module.exports = __toCommonJS(SavedAndRecentQueryClientContext_exports);
+module.exports = __toCommonJS(AppStateContext_exports);
 var import_react_query = require("@tanstack/react-query");
 var import_react = require("react");
-const queryClient = new import_react_query.QueryClient({
+var import_app_state_store = require("./app-state-store.js");
+const queryClientConfig = {
   defaultOptions: {
     queries: {
       retry: false,
-      // Data only changes via explicit mutations — we can set the staleTime to infinity to prevent unnecessary refetches.
+      // Data only changes via explicit mutations — prevent unnecessary refetches.
       staleTime: Infinity
     },
     mutations: {
       retry: false
     }
   }
+};
+const defaultStore = (0, import_app_state_store.createAppStateStore)();
+defaultStore.setState({ isLoading: false });
+const AppStateContext = (0, import_react.createContext)({
+  store: defaultStore,
+  scope: "user",
+  queryClient: new import_react_query.QueryClient(queryClientConfig)
 });
-const RecentAndSavedFiltersQueryClientContext = (0, import_react.createContext)(queryClient);

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

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+/**
+ * Props for {@link AppStateProvider}.
+ */
+export interface AppStateProviderProps {
+    children: ReactNode;
+    /**
+     * Whether to use user-scoped or app-scoped state.
+     * - `'user'`: state is stored per user per app (default is `'user'`)
+     * - `'app'`: state is shared across all users of the app
+     */
+    scope?: 'user' | 'app';
+    /**
+     * Called when the initial state fetch or a mutation fails.
+     */
+    onError?: (error: Error) => void;
+}
+/**
+ * Provides reactive access to Dynatrace app state for its subtree.
+ *
+ * Wrap your app (or a section of it) in `<AppStateProvider>` and use
+ * `_useUserAppState` / `_useAppState` to read and write persisted state keys.
+ */
+export declare function AppStateProvider({ children, scope, onError, }: AppStateProviderProps): import("react/jsx-runtime").JSX.Element;