@dynatrace/strato-components 3.12.1 → 3.13.0

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

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

@@ -338,11 +338,6 @@ export declare const vrLightGeneratedOverrides: {
     '--dt-colors-syntax-tag': string;
     '--dt-colors-syntax-operators': string;
     '--dt-colors-syntax-boolean': string;
-    '--dt-colors-charts-status-ideal-default': string;
-    '--dt-colors-charts-status-good-default': string;
-    '--dt-colors-charts-status-neutral-default': string;
-    '--dt-colors-charts-status-warning-default': string;
-    '--dt-colors-charts-status-critical-default': string;
 };
 /** Visual refresh colors — light mode. */
 export declare const vrLightColors: {
@@ -688,11 +683,6 @@ export declare const vrDarkGeneratedOverrides: {
     '--dt-colors-syntax-tag': string;
     '--dt-colors-syntax-operators': string;
     '--dt-colors-syntax-boolean': string;
-    '--dt-colors-charts-status-ideal-default': string;
-    '--dt-colors-charts-status-good-default': string;
-    '--dt-colors-charts-status-neutral-default': string;
-    '--dt-colors-charts-status-warning-default': string;
-    '--dt-colors-charts-status-critical-default': string;
 };
 /** Visual refresh colors — dark mode. */
 export declare const vrDarkColors: {

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

@@ -361,12 +361,7 @@ const vrLightGeneratedOverrides = {
   "--dt-colors-syntax-classname": "#31323a",
   "--dt-colors-syntax-tag": "#c50222",
   "--dt-colors-syntax-operators": "#9215e0",
-  "--dt-colors-syntax-boolean": "#a34400",
-  "--dt-colors-charts-status-ideal-default": "#00c181",
-  "--dt-colors-charts-status-good-default": "#1966ff",
-  "--dt-colors-charts-status-neutral-default": "#34353d",
-  "--dt-colors-charts-status-warning-default": "#fdc300",
-  "--dt-colors-charts-status-critical-default": "#e01032"
+  "--dt-colors-syntax-boolean": "#a34400"
 };
 const vrLightColors = {
   "--dt-colors-background-surface-backdrop": "color-mix(in srgb, var(--dt-colors-theme-foreground-10) 40%, transparent)",
@@ -707,12 +702,7 @@ const vrDarkGeneratedOverrides = {
   "--dt-colors-syntax-classname": "#eaeaf0",
   "--dt-colors-syntax-tag": "#ff9eae",
   "--dt-colors-syntax-operators": "#d6a5fd",
-  "--dt-colors-syntax-boolean": "#ffa27a",
-  "--dt-colors-charts-status-ideal-default": "#03a570",
-  "--dt-colors-charts-status-good-default": "#115aed",
-  "--dt-colors-charts-status-neutral-default": "#dbdbe1",
-  "--dt-colors-charts-status-warning-default": "#dfac01",
-  "--dt-colors-charts-status-critical-default": "#cd0c2c"
+  "--dt-colors-syntax-boolean": "#ffa27a"
 };
 const vrDarkColors = {
   "--dt-colors-background-surface-backdrop": "color-mix(in srgb, var(--dt-colors-theme-foreground-20) 80%, transparent)",

package/core/components/focus-scope/FocusScope.js

@@ -26,18 +26,9 @@ var import_useActiveElement = require("../../hooks/useActiveElement.js");
 var import_useFocusContext = require("../../hooks/useFocusContext.js");
 var import_useModality = require("../../hooks/useModality.js");
 var import_focus_first_descendant = require("../../utils/focus-management/focus-first-descendant.js");
-var import_get_first_focusable_child = require("../../utils/focus-management/get-first-focusable-child.js");
-var import_get_last_focusable_child = require("../../utils/focus-management/get-last-focusable-child.js");
-function isInInertSubtree(element) {
-  let node = element;
-  while (node) {
-    if (node.hasAttribute("inert")) {
-      return true;
-    }
-    node = node.parentElement;
-  }
-  return false;
-}
+var import_get_first_tabbable_child = require("../../utils/focus-management/get-first-tabbable-child.js");
+var import_get_last_tabbable_child = require("../../utils/focus-management/get-last-tabbable-child.js");
+var import_is_tabbable = require("../../utils/focus-management/is-tabbable.js");
 const FocusScope = (props) => {
   const { autoFocus, contain, children, "data-testid": dataTestId } = props;
   const focusContext = (0, import_useFocusContext.useFocusContext)();
@@ -73,7 +64,7 @@ const FocusScope = (props) => {
         if (target && wrapperRef.current?.contains(target)) {
           return;
         }
-        if (isInInertSubtree(target)) {
+        if ((0, import_is_tabbable.isInInertSubtree)(target)) {
           (0, import_focus_first_descendant.focusFirstDescendant)(wrapperRef.current, focusOptionsRef.current);
           return;
         }
@@ -83,6 +74,7 @@ const FocusScope = (props) => {
         (0, import_focus_first_descendant.focusFirstDescendant)(wrapperRef.current, focusOptionsRef.current);
       };
       document.addEventListener("focusin", handleFocusIn, true);
+      let isTabbing = false;
       const handleKeyDown = (event) => {
         if (event.key !== "Tab") {
           return;
@@ -90,12 +82,16 @@ const FocusScope = (props) => {
         if (focusContext.getTopScope() !== scopeRegistration) {
           return;
         }
+        isTabbing = true;
+        setTimeout(() => {
+          isTabbing = false;
+        }, 0);
         const wrapper = wrapperRef.current;
         if (!wrapper) {
           return;
         }
-        const first = (0, import_get_first_focusable_child.getFirstFocusableChild)(wrapper);
-        const last = (0, import_get_last_focusable_child.getLastFocusableChild)(wrapper);
+        const first = (0, import_get_first_tabbable_child.getFirstTabbableChild)(wrapper);
+        const last = (0, import_get_last_tabbable_child.getLastTabbableChild)(wrapper);
         if (!first || !last) {
           return;
         }
@@ -112,10 +108,37 @@ const FocusScope = (props) => {
         }
       };
       document.addEventListener("keydown", handleKeyDown, true);
+      const handleFocusOut = (event) => {
+        if (!isTabbing) {
+          return;
+        }
+        if (focusContext.getTopScope() !== scopeRegistration) {
+          return;
+        }
+        if (event.relatedTarget !== null) {
+          return;
+        }
+        requestAnimationFrame(() => {
+          const wrapper = wrapperRef.current;
+          if (!wrapper || !document.hasFocus()) {
+            return;
+          }
+          if (wrapper.contains(document.activeElement)) {
+            return;
+          }
+          const container = wrapper.firstElementChild;
+          container?.focus({ preventScroll: true });
+          if (document.activeElement !== container) {
+            (0, import_focus_first_descendant.focusFirstDescendant)(wrapper, focusOptionsRef.current);
+          }
+        });
+      };
+      document.addEventListener("focusout", handleFocusOut, true);
       (0, import_focus_first_descendant.focusFirstDescendant)(wrapperRef.current, focusOptions);
       return () => {
         document.removeEventListener("focusin", handleFocusIn, true);
         document.removeEventListener("keydown", handleKeyDown, true);
+        document.removeEventListener("focusout", handleFocusOut, true);
         unregister();
         focusContext.setBackgroundInertness(false);
         const stillActive = focusContext.getTopScope();

package/core/components/time-indicator/TimeIndicator.js

@@ -61,13 +61,13 @@ const TimeIndicator = (props) => {
     );
   } else if (diff < MilliSecondsInfo.OneHour) {
     const minutes = -Math.floor(diff / MilliSecondsInfo.OneMinute);
-    content = // eslint rule is not smart in checking this. The style prop comes from the lib.Intl types, where it defines the style of the formatted value.
-    // eslint-disable-next-line react/style-prop-object
+    content = // oxlint rule is not smart in checking this. The style prop comes from the lib.Intl types, where it defines the style of the formatted value.
+    // oxlint-disable-next-line react/style-prop-object
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedRelativeTime, { value: minutes, unit: "minute", style: "narrow" });
   } else if (diff < MilliSecondsInfo.OneDay) {
     const hours = -Math.floor(diff / MilliSecondsInfo.OneHour);
-    content = // eslint rule is not smart in checking this. The style prop comes from the lib.Intl types, where it defines the style of the formatted value.
-    // eslint-disable-next-line react/style-prop-object
+    content = // oxlint rule is not smart in checking this. The style prop comes from the lib.Intl types, where it defines the style of the formatted value.
+    // oxlint-disable-next-line react/style-prop-object
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedRelativeTime, { value: hours, unit: "hour", style: "narrow" });
   } else {
     const days = -Math.floor(diff / MilliSecondsInfo.OneDay);

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

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

package/core/hooks/useFocusRing.js

@@ -36,7 +36,7 @@ var import_modality = require("../utils/modality.js");
 function useFocusRing(props = {}) {
   const {
     color,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    // oxlint-disable-next-line typescript/no-deprecated
     variant,
     ignoreModality = false,
     isMinimal = false,

package/core/hooks/useRovingFocus.js

@@ -271,7 +271,7 @@ function useRovingFocus({
     // Excluding initialIndex and activeElement.
     // A change in neither of them should lead to this effect running again, since
     // it would clean-up and re-add the event listeners every time.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
     [focusableChildrenSelector, handleKeydown, childNodesCount]
   );
   (0, import_react.useEffect)(() => {

package/core/hooks/useSlots.js

@@ -23,10 +23,13 @@ module.exports = __toCommonJS(useSlots_exports);
 var import_react = require("react");
 var import_is_node_environment = require("../utils/is-node-environment.js");
 function mapValues(obj, fn) {
-  return Object.keys(obj).reduce((result, key) => {
-    result[key] = fn(obj[key]);
-    return result;
-  }, {});
+  return Object.keys(obj).reduce(
+    (result, key) => {
+      result[key] = fn(obj[key]);
+      return result;
+    },
+    {}
+  );
 }
 function useSlots(children, config) {
   const slots = mapValues(

package/core/hooks/useVisualRefreshEnabled.js

@@ -24,7 +24,7 @@ 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
+    // oxlint-disable-next-line typescript/no-explicit-any
     () => () => globalThis.dtVisualRefreshEnabled,
     () => (0, import_is_visual_refresh_enabled.isVisualRefreshEnabled)(),
     () => false

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)(() => {
@@ -91,7 +98,7 @@ function AppStateProvider({
   const contextValue = (0, import_react.useMemo)(
     () => ({ store, scope, queryClient }),
     // store and queryClient are stable refs; only scope can change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
     [scope]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_AppStateContext.AppStateContext.Provider, { value: contextValue, children: [

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,71 @@ 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)(
+    {
+      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 +139,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 +177,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 +195,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.12.1"
+          version: "3.13.0"
         }
       });
     } 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.12.1"
+          version: "3.13.0"
         }
       });
     }

package/core/styles/defaultChartValues.css

@@ -1,4 +1,4 @@
-._1rtjj3o0-3-12-1 {
+._1rtjj3o0-3-13-0 {
   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-12-1";
+var defaultChartSize = "_1rtjj3o0-3-13-0";