@dynatrace/strato-components 0.84.21 → 0.84.31

package/core/components/app-root/AppRoot.d.ts

@@ -2,16 +2,21 @@ import React, { type PropsWithChildren } from 'react';
 import 'wicg-inert';
 import './AppRoot.css.js';
 import { type DataTestId } from '../../types/data-props.js';
+import { type MaskingProps } from '../../types/masking-props.js';
 import { type StylingProps } from '../../types/styling-props.js';
-/** AppRoot component props. */
-export type AppRootProps = PropsWithChildren<DataTestId & StylingProps>;
 /**
+ * @public
+ * AppRoot component props.
+ */
+export type AppRootProps = PropsWithChildren<DataTestId & StylingProps & MaskingProps>;
+/**
+ * @public
  * In order to have all the providers in place for rendering overlays, applying
  * global styles or internationalization, you need to wrap your app in the
  * `AppRoot`. If you're using the `dt-app` to create your app, this is
  * automatically taken care of and you can start working on your app without
  * further ado.
  */
-export declare const AppRoot: React.ForwardRefExoticComponent<DataTestId & StylingProps & {
+export declare const AppRoot: React.ForwardRefExoticComponent<DataTestId & StylingProps & MaskingProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -49,7 +49,9 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
     const {
       style: consumerStyle,
       className: consumerClassName,
-      "data-testid": dataTestId = "app-root"
+      "data-testid": dataTestId = "app-root",
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow
     } = props;
     const [messages, setMessages] = (0, import_react.useState)({});
     const { children } = props;
@@ -94,7 +96,9 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
         "data-testid": dataTestId,
         className: consumerClassName,
         style: consumerStyle,
-        "data-theme": theme
+        "data-theme": theme,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow
       },
       /* @__PURE__ */ import_react.default.createElement(
         import_react_intl.IntlProvider,

package/core/contexts/FocusContext.d.ts

@@ -1,4 +1,4 @@
-import { Modality } from '../providers/FocusProvider.js';
+import type { Modality } from '../providers/FocusProvider.js';
 /**
  * Defines the contents of the FocusContext.
  * @internal

package/core/hooks/useCurrentTheme.d.ts

@@ -1,2 +1,5 @@
-/** Returns the current theme based on sdk-setting or browsers preferred color-scheme */
+/**
+ * @public
+ * Returns the current theme based on sdk-setting or browsers preferred color-scheme
+ */
 export declare function useCurrentTheme(): 'light' | 'dark';

package/core/index.d.ts

@@ -4,6 +4,7 @@ export { type FocusContextProps as _FocusContextProps } from './contexts/FocusCo
 export { useCurrentTheme } from './hooks/useCurrentTheme.js';
 export { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';
 export { FocusProvider as _FocusProvider, type Modality as _Modality, } from './providers/FocusProvider.js';
+export type { MaskingProps } from './types/masking-props.js';
 export type { DataTestId } from './types/data-props.js';
 export type { StylingProps } from './types/styling-props.js';
 export type { WithChildren } from './types/with-children.js';

package/core/types/data-props.d.ts

@@ -1,4 +1,5 @@
 /**
+ * @public
  * Type defining the data-testid prop that is mapped to the rendered components root node.
  */
 export type DataTestId = {

package/core/types/masking-props.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @public
+ * Props defining the masking of data in Session Replay. They are applied to the component's root node. */
+export interface MaskingProps {
+    /** Determines whether masking is enabled and the data is replaced with asterisks. */
+    'data-dtrum-mask'?: boolean;
+    /** Determines whether masking is disabled and the data is shown. */
+    'data-dtrum-allow'?: boolean;
+}

package/core/types/masking-props.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 masking_props_exports = {};
+module.exports = __toCommonJS(masking_props_exports);

package/core/types/styling-props.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import type { CSSProperties } from 'react';
 /**
+ * @public
  * Collection of component styling props including `style` and `className` types.
  */
 export interface StylingProps {
@@ -14,5 +15,5 @@ export interface StylingProps {
      *
      * Be aware that overriding certain styles may result in unexpected behavior!
      */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
 }

package/core/types/with-children.d.ts

@@ -1,5 +1,8 @@
 import type { ReactNode } from 'react';
-/** Helper type to add children to props */
+/**
+ * @public
+ * Helper type to add children to props
+ */
 export interface WithChildren {
     /** Children provided to the component. */
     children?: ReactNode;

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

@@ -22,7 +22,9 @@ const AppRoot = /* @__PURE__ */ forwardRef(
     const {
       style: consumerStyle,
       className: consumerClassName,
-      "data-testid": dataTestId = "app-root"
+      "data-testid": dataTestId = "app-root",
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow
     } = props;
     const [messages, setMessages] = useState({});
     const { children } = props;
@@ -67,7 +69,9 @@ const AppRoot = /* @__PURE__ */ forwardRef(
         "data-testid": dataTestId,
         className: consumerClassName,
         style: consumerStyle,
-        "data-theme": theme
+        "data-theme": theme,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow
       },
       /* @__PURE__ */ React.createElement(
         IntlProvider,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/core/components/app-root/AppRoot.tsx"],
-  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport React, {\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport { IntlProvider, type MessageFormatElement } from 'react-intl';\n\nimport 'wicg-inert';\nimport { getLanguage, getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport './AppRoot.sty.js';\nimport { useCurrentTheme } from '../../hooks/useCurrentTheme.js';\nimport { FocusProvider } from '../../providers/FocusProvider.js';\nimport { type DataTestId } from '../../types/data-props.js';\nimport { type StylingProps } from '../../types/styling-props.js';\n\n/**\n * Gets the href value set in the <base> element to prefix fetches correctly.\n * Will always end with a `/` value\n */\nfunction getBaseHref(): string {\n  const baseElement = document.querySelector('base');\n  const href = baseElement?.href ?? '/';\n  return href.endsWith('/') ? href : `${href}/`;\n}\n\n/** AppRoot component props. */\nexport type AppRootProps = PropsWithChildren<DataTestId & StylingProps>;\n\nconst defaultLanguage = 'en';\n/**\n * In order to have all the providers in place for rendering overlays, applying\n * global styles or internationalization, you need to wrap your app in the\n * `AppRoot`. If you're using the `dt-app` to create your app, this is\n * automatically taken care of and you can start working on your app without\n * further ado.\n */\nexport const AppRoot = /* @__PURE__ */ forwardRef<HTMLDivElement, AppRootProps>(\n  (props, forwardedRef) => {\n    const {\n      style: consumerStyle,\n      className: consumerClassName,\n      'data-testid': dataTestId = 'app-root',\n    } = props;\n\n    /** Messages that are used for the translation. */\n    const [messages, setMessages] = useState<\n      Record<string, string> | Record<string, MessageFormatElement[]>\n    >({});\n\n    const { children } = props;\n\n    const theme = useCurrentTheme();\n    const language = getLanguage();\n    let timezone = getTimezone();\n    try {\n      new Intl.DateTimeFormat(language, { timeZone: timezone });\n    } catch (error) {\n      // If the passed timezone is not valid, we can fall back to the browsers\n      // configured one.\n      timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n    }\n\n    /** Inject the font link into the head */\n    useLayoutEffect(() => {\n      // As we should not use @import within the createGlobalStyles\n      // https://styled-components.com/docs/faqs#note-regarding-css-import-and-createglobalstyle\n      // and we need to inject the fonts at run time to decouple font usage\n      // from the cli build / deployment\n      // we will inject the link tag here in the root on initial load.\n      const link = document.createElement('link');\n\n      link.rel = 'stylesheet';\n      link.href = 'https://dt-cdn.net/fonts/fonts-v004.css';\n      document.head.appendChild(link);\n      return () => {\n        document.head.removeChild(link);\n      };\n    }, []);\n\n    /**\n     * Synchronize the [data-theme] attribute to the root of the document\n     * to have the design tokens defined in the cascade.\n     */\n    useLayoutEffect(() => {\n      if (document !== undefined) {\n        document.documentElement.setAttribute('data-theme', theme);\n      }\n    }, [theme]);\n\n    useEffect(() => {\n      if (language === 'en') {\n        // Don't fetch translations for 'en' to avoid an additional render cycle.\n        // The default messages are in english already.\n        return;\n      }\n\n      fetch(`${getBaseHref()}lang/${language}.json`)\n        .then((res) => {\n          return res.json();\n        })\n        .then((receivedMessages) => {\n          setMessages(receivedMessages);\n        })\n        .catch(() => {\n          // Only set messages to a new empty object if the previous messages were not empty.\n          // `setMessages({})` would make react believe that this is a new object and, hence, re-render.\n          // By just returning `prev` if the messages were already empty, we can avoid the additional render.\n          setMessages((prev) => (isEmpty(prev) ? prev : {}));\n        });\n    }, [language]);\n\n    return (\n      <div\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-theme={theme}\n      >\n        <IntlProvider\n          locale={language}\n          timeZone={timezone}\n          messages={messages}\n          defaultLocale={defaultLanguage}\n        >\n          <FocusProvider>{children}</FocusProvider>\n        </IntlProvider>\n      </div>\n    );\n  },\n);\n\n(AppRoot as typeof AppRoot & { displayName: string }).displayName = 'AppRoot';\n"],
-  "mappings": "AAAA,SAAS,eAAe;AACxB,OAAO;AAAA,EAEL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAA+C;AAExD,OAAO;AACP,SAAS,aAAa,mBAAmB;AAEzC,OAAO;AACP,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAQ9B,SAAS,cAAsB;AAC7B,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,OAAO,aAAa,QAAQ;AAClC,SAAO,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI;AAC5C;AAKA,MAAM,kBAAkB;AAQjB,MAAM,UAA0B;AAAA,EACrC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,eAAe,aAAa;AAAA,IAC9B,IAAI;AAGJ,UAAM,CAAC,UAAU,WAAW,IAAI,SAE9B,CAAC,CAAC;AAEJ,UAAM,EAAE,SAAS,IAAI;AAErB,UAAM,QAAQ,gBAAgB;AAC9B,UAAM,WAAW,YAAY;AAC7B,QAAI,WAAW,YAAY;AAC3B,QAAI;AACF,UAAI,KAAK,eAAe,UAAU,EAAE,UAAU,SAAS,CAAC;AAAA,IAC1D,SAAS,OAAO;AAGd,iBAAW,KAAK,eAAe,EAAE,gBAAgB,EAAE;AAAA,IACrD;AAGA,oBAAgB,MAAM;AAMpB,YAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,WAAK,MAAM;AACX,WAAK,OAAO;AACZ,eAAS,KAAK,YAAY,IAAI;AAC9B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,IAAI;AAAA,MAChC;AAAA,IACF,GAAG,CAAC,CAAC;AAML,oBAAgB,MAAM;AACpB,UAAI,aAAa,QAAW;AAC1B,iBAAS,gBAAgB,aAAa,cAAc,KAAK;AAAA,MAC3D;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,cAAU,MAAM;AACd,UAAI,aAAa,MAAM;AAGrB;AAAA,MACF;AAEA,YAAM,GAAG,YAAY,CAAC,QAAQ,QAAQ,OAAO,EAC1C,KAAK,CAAC,QAAQ;AACb,eAAO,IAAI,KAAK;AAAA,MAClB,CAAC,EACA,KAAK,CAAC,qBAAqB;AAC1B,oBAAY,gBAAgB;AAAA,MAC9B,CAAC,EACA,MAAM,MAAM;AAIX,oBAAY,CAAC,SAAU,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAE;AAAA,MACnD,CAAC;AAAA,IACL,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACP,cAAY;AAAA;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,UAAU;AAAA,UACV;AAAA,UACA,eAAe;AAAA;AAAA,QAEf,oCAAC,qBAAe,QAAS;AAAA,MAC3B;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,QAAqD,cAAc;",
+  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport React, {\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport { IntlProvider, type MessageFormatElement } from 'react-intl';\n\nimport 'wicg-inert';\nimport { getLanguage, getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport './AppRoot.sty.js';\nimport { useCurrentTheme } from '../../hooks/useCurrentTheme.js';\nimport { FocusProvider } from '../../providers/FocusProvider.js';\nimport { type DataTestId } from '../../types/data-props.js';\nimport { type MaskingProps } from '../../types/masking-props.js';\nimport { type StylingProps } from '../../types/styling-props.js';\n\n/**\n * Gets the href value set in the <base> element to prefix fetches correctly.\n * Will always end with a `/` value\n */\nfunction getBaseHref(): string {\n  const baseElement = document.querySelector('base');\n  const href = baseElement?.href ?? '/';\n  return href.endsWith('/') ? href : `${href}/`;\n}\n\n/**\n * @public\n * AppRoot component props.\n */\nexport type AppRootProps = PropsWithChildren<\n  DataTestId & StylingProps & MaskingProps\n>;\n\nconst defaultLanguage = 'en';\n\n/**\n * @public\n * In order to have all the providers in place for rendering overlays, applying\n * global styles or internationalization, you need to wrap your app in the\n * `AppRoot`. If you're using the `dt-app` to create your app, this is\n * automatically taken care of and you can start working on your app without\n * further ado.\n */\nexport const AppRoot = /* @__PURE__ */ forwardRef<HTMLDivElement, AppRootProps>(\n  (props, forwardedRef) => {\n    const {\n      style: consumerStyle,\n      className: consumerClassName,\n      'data-testid': dataTestId = 'app-root',\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n    } = props;\n\n    /** Messages that are used for the translation. */\n    const [messages, setMessages] = useState<\n      Record<string, string> | Record<string, MessageFormatElement[]>\n    >({});\n\n    const { children } = props;\n\n    const theme = useCurrentTheme();\n    const language = getLanguage();\n    let timezone = getTimezone();\n    try {\n      new Intl.DateTimeFormat(language, { timeZone: timezone });\n    } catch (error) {\n      // If the passed timezone is not valid, we can fall back to the browsers\n      // configured one.\n      timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n    }\n\n    /** Inject the font link into the head */\n    useLayoutEffect(() => {\n      // As we should not use @import within the createGlobalStyles\n      // https://styled-components.com/docs/faqs#note-regarding-css-import-and-createglobalstyle\n      // and we need to inject the fonts at run time to decouple font usage\n      // from the cli build / deployment\n      // we will inject the link tag here in the root on initial load.\n      const link = document.createElement('link');\n\n      link.rel = 'stylesheet';\n      link.href = 'https://dt-cdn.net/fonts/fonts-v004.css';\n      document.head.appendChild(link);\n      return () => {\n        document.head.removeChild(link);\n      };\n    }, []);\n\n    /**\n     * Synchronize the [data-theme] attribute to the root of the document\n     * to have the design tokens defined in the cascade.\n     */\n    useLayoutEffect(() => {\n      if (document !== undefined) {\n        document.documentElement.setAttribute('data-theme', theme);\n      }\n    }, [theme]);\n\n    useEffect(() => {\n      if (language === 'en') {\n        // Don't fetch translations for 'en' to avoid an additional render cycle.\n        // The default messages are in english already.\n        return;\n      }\n\n      fetch(`${getBaseHref()}lang/${language}.json`)\n        .then((res) => {\n          return res.json();\n        })\n        .then((receivedMessages) => {\n          setMessages(receivedMessages);\n        })\n        .catch(() => {\n          // Only set messages to a new empty object if the previous messages were not empty.\n          // `setMessages({})` would make react believe that this is a new object and, hence, re-render.\n          // By just returning `prev` if the messages were already empty, we can avoid the additional render.\n          setMessages((prev) => (isEmpty(prev) ? prev : {}));\n        });\n    }, [language]);\n\n    return (\n      <div\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-theme={theme}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <IntlProvider\n          locale={language}\n          timeZone={timezone}\n          messages={messages}\n          defaultLocale={defaultLanguage}\n        >\n          <FocusProvider>{children}</FocusProvider>\n        </IntlProvider>\n      </div>\n    );\n  },\n);\n\n(AppRoot as typeof AppRoot & { displayName: string }).displayName = 'AppRoot';\n"],
+  "mappings": "AAAA,SAAS,eAAe;AACxB,OAAO;AAAA,EAEL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAA+C;AAExD,OAAO;AACP,SAAS,aAAa,mBAAmB;AAEzC,OAAO;AACP,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAS9B,SAAS,cAAsB;AAC7B,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,OAAO,aAAa,QAAQ;AAClC,SAAO,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI;AAC5C;AAUA,MAAM,kBAAkB;AAUjB,MAAM,UAA0B;AAAA,EACrC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,eAAe,aAAa;AAAA,MAC5B,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,IACtB,IAAI;AAGJ,UAAM,CAAC,UAAU,WAAW,IAAI,SAE9B,CAAC,CAAC;AAEJ,UAAM,EAAE,SAAS,IAAI;AAErB,UAAM,QAAQ,gBAAgB;AAC9B,UAAM,WAAW,YAAY;AAC7B,QAAI,WAAW,YAAY;AAC3B,QAAI;AACF,UAAI,KAAK,eAAe,UAAU,EAAE,UAAU,SAAS,CAAC;AAAA,IAC1D,SAAS,OAAO;AAGd,iBAAW,KAAK,eAAe,EAAE,gBAAgB,EAAE;AAAA,IACrD;AAGA,oBAAgB,MAAM;AAMpB,YAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,WAAK,MAAM;AACX,WAAK,OAAO;AACZ,eAAS,KAAK,YAAY,IAAI;AAC9B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,IAAI;AAAA,MAChC;AAAA,IACF,GAAG,CAAC,CAAC;AAML,oBAAgB,MAAM;AACpB,UAAI,aAAa,QAAW;AAC1B,iBAAS,gBAAgB,aAAa,cAAc,KAAK;AAAA,MAC3D;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,cAAU,MAAM;AACd,UAAI,aAAa,MAAM;AAGrB;AAAA,MACF;AAEA,YAAM,GAAG,YAAY,CAAC,QAAQ,QAAQ,OAAO,EAC1C,KAAK,CAAC,QAAQ;AACb,eAAO,IAAI,KAAK;AAAA,MAClB,CAAC,EACA,KAAK,CAAC,qBAAqB;AAC1B,oBAAY,gBAAgB;AAAA,MAC9B,CAAC,EACA,MAAM,MAAM;AAIX,oBAAY,CAAC,SAAU,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAE;AAAA,MACnD,CAAC;AAAA,IACL,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACP,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA;AAAA,MAElB;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,UAAU;AAAA,UACV;AAAA,UACA,eAAe;AAAA;AAAA,QAEf,oCAAC,qBAAe,QAAS;AAAA,MAC3B;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,QAAqD,cAAc;",
   "names": []
 }

package/esm/core/contexts/FocusContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/core/contexts/FocusContext.tsx"],
-  "sourcesContent": ["import { createContext } from 'react';\n\nimport { Modality } from '../providers/FocusProvider.js';\n\n/**\n * Defines the contents of the FocusContext.\n * @internal\n */\nexport type FocusContextProps = {\n  backgroundInertness?: boolean;\n  modality: Modality;\n  setBackgroundInertness: (value: boolean) => void;\n};\n\n/**\n * @internal\n *\n * This context keeps all information needed for proper focus management.\n * @param modality - currently used pointer device\n * @param backgroundInertness - if the background (behind overlays) is currently inert (inactive)\n * @param setBackgroundInertness - updates the backgrounds active status\n */\nexport const FocusContext = createContext<FocusContextProps>({\n  modality: 'unknown',\n  backgroundInertness: undefined,\n  setBackgroundInertness: (value) => null,\n});\n"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { Modality } from '../providers/FocusProvider.js';\n\n/**\n * Defines the contents of the FocusContext.\n * @internal\n */\nexport type FocusContextProps = {\n  backgroundInertness?: boolean;\n  modality: Modality;\n  setBackgroundInertness: (value: boolean) => void;\n};\n\n/**\n * @internal\n *\n * This context keeps all information needed for proper focus management.\n * @param modality - currently used pointer device\n * @param backgroundInertness - if the background (behind overlays) is currently inert (inactive)\n * @param setBackgroundInertness - updates the backgrounds active status\n */\nexport const FocusContext = createContext<FocusContextProps>({\n  modality: 'unknown',\n  backgroundInertness: undefined,\n  setBackgroundInertness: (value) => null,\n});\n"],
   "mappings": "AAAA,SAAS,qBAAqB;AAsBvB,MAAM,eAAe,cAAiC;AAAA,EAC3D,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,wBAAwB,CAAC,UAAU;AACrC,CAAC;",
   "names": []
 }

package/esm/core/hooks/useCurrentTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/core/hooks/useCurrentTheme.tsx"],
-  "sourcesContent": ["import { useEffect, useMemo, useState } from 'react';\n\nimport { getTheme } from '@dynatrace-sdk/user-preferences';\n\nimport { isBrowser } from '../utils/isBrowser.js';\n\n/** Returns the current theme based on sdk-setting or browsers preferred color-scheme */\nexport function useCurrentTheme(): 'light' | 'dark' {\n  const sdkTheme = useMemo(() => {\n    return getTheme();\n  }, []);\n\n  if (sdkTheme === 'dark' || sdkTheme === 'light') {\n    return sdkTheme;\n  }\n\n  if (!isBrowser) {\n    return 'light';\n  }\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const themeQuery = useMemo(\n    () => window && window.matchMedia('(prefers-color-scheme: dark)'),\n    [],\n  );\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const [currentTheme, setCurrentTheme] = useState<'light' | 'dark'>(\n    themeQuery.matches ? 'dark' : 'light',\n  );\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  useEffect(() => {\n    const handlePrefersColorSchemeChange = () => {\n      const prefersDark = themeQuery.matches;\n      setCurrentTheme(prefersDark ? 'dark' : 'light');\n    };\n\n    themeQuery.addEventListener('change', handlePrefersColorSchemeChange);\n    return () => {\n      themeQuery.removeEventListener('change', handlePrefersColorSchemeChange);\n    };\n  }, [themeQuery]);\n\n  return currentTheme;\n}\n"],
-  "mappings": "AAAA,SAAS,WAAW,SAAS,gBAAgB;AAE7C,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAGnB,SAAS,kBAAoC;AAClD,QAAM,WAAW,QAAQ,MAAM;AAC7B,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,MAAI,aAAa,UAAU,aAAa,SAAS;AAC/C,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAKA,QAAM,aAAa;AAAA,IACjB,MAAM,UAAU,OAAO,WAAW,8BAA8B;AAAA,IAChE,CAAC;AAAA,EACH;AAKA,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC,WAAW,UAAU,SAAS;AAAA,EAChC;AAKA,YAAU,MAAM;AACd,UAAM,iCAAiC,MAAM;AAC3C,YAAM,cAAc,WAAW;AAC/B,sBAAgB,cAAc,SAAS,OAAO;AAAA,IAChD;AAEA,eAAW,iBAAiB,UAAU,8BAA8B;AACpE,WAAO,MAAM;AACX,iBAAW,oBAAoB,UAAU,8BAA8B;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AACT;",
+  "sourcesContent": ["import { useEffect, useMemo, useState } from 'react';\n\nimport { getTheme } from '@dynatrace-sdk/user-preferences';\n\nimport { isBrowser } from '../utils/isBrowser.js';\n\n/**\n * @public\n * Returns the current theme based on sdk-setting or browsers preferred color-scheme\n */\nexport function useCurrentTheme(): 'light' | 'dark' {\n  const sdkTheme = useMemo(() => {\n    return getTheme();\n  }, []);\n\n  if (sdkTheme === 'dark' || sdkTheme === 'light') {\n    return sdkTheme;\n  }\n\n  if (!isBrowser) {\n    return 'light';\n  }\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const themeQuery = useMemo(\n    () => window && window.matchMedia('(prefers-color-scheme: dark)'),\n    [],\n  );\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const [currentTheme, setCurrentTheme] = useState<'light' | 'dark'>(\n    themeQuery.matches ? 'dark' : 'light',\n  );\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  useEffect(() => {\n    const handlePrefersColorSchemeChange = () => {\n      const prefersDark = themeQuery.matches;\n      setCurrentTheme(prefersDark ? 'dark' : 'light');\n    };\n\n    themeQuery.addEventListener('change', handlePrefersColorSchemeChange);\n    return () => {\n      themeQuery.removeEventListener('change', handlePrefersColorSchemeChange);\n    };\n  }, [themeQuery]);\n\n  return currentTheme;\n}\n"],
+  "mappings": "AAAA,SAAS,WAAW,SAAS,gBAAgB;AAE7C,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAMnB,SAAS,kBAAoC;AAClD,QAAM,WAAW,QAAQ,MAAM;AAC7B,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,MAAI,aAAa,UAAU,aAAa,SAAS;AAC/C,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAKA,QAAM,aAAa;AAAA,IACjB,MAAM,UAAU,OAAO,WAAW,8BAA8B;AAAA,IAChE,CAAC;AAAA,EACH;AAKA,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC,WAAW,UAAU,SAAS;AAAA,EAChC;AAKA,YAAU,MAAM;AACd,UAAM,iCAAiC,MAAM;AAC3C,YAAM,cAAc,WAAW;AAC/B,sBAAgB,cAAc,SAAS,OAAO;AAAA,IAChD;AAEA,eAAW,iBAAiB,UAAU,8BAA8B;AACpE,WAAO,MAAM;AACX,iBAAW,oBAAoB,UAAU,8BAA8B;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AACT;",
   "names": []
 }

package/esm/core/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/core/index.ts"],
-  "sourcesContent": ["export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';\nexport {\n  FocusScope as _FocusScope,\n  type FocusScopeProps as _FocusScopeProps,\n} from './components/focus-scope/FocusScope.js';\n\nexport { type FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';\n\nexport { useCurrentTheme } from './hooks/useCurrentTheme.js';\nexport { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';\nexport {\n  FocusProvider as _FocusProvider,\n  type Modality as _Modality,\n} from './providers/FocusProvider.js';\nexport type { DataTestId } from './types/data-props.js';\nexport type { StylingProps } from './types/styling-props.js';\nexport type { WithChildren } from './types/with-children.js';\n\nexport { attemptFocus as _attemptFocus } from './utils/focus-management/attempt-focus.js';\nexport { focusFirstDescendant as _focusFirstDescendant } from './utils/focus-management/focus-first-descendant.js';\nexport { getFirstFocusableChild as _getFirstFocusableChild } from './utils/focus-management/get-first-focusable-child.js';\nexport { getLastFocusableChild as _getLastFocusableChild } from './utils/focus-management/get-last-focusable-child.js';\nexport { isFocusable as _isFocusable } from './utils/focus-management/is-focusable.js';\nexport { isBrowser as _isBrowser } from './utils/isBrowser.js';\nexport {\n  mergeProps as _mergeProps,\n  type NullToObject as _NullToObject,\n  type TupleTypes as _TupleTypes,\n  type UnionToIntersection as _UnionToIntersection,\n} from './utils/merge-props.js';\n"],
-  "mappings": "AAAA,SAAS,eAAkC;AAC3C;AAAA,EACgB;AAAA,OAET;AAIP,SAAS,uBAAuB;AAChC,SAA4B,uBAAwB;AACpD;AAAA,EACmB;AAAA,OAEZ;AAKP,SAAyB,oBAAqB;AAC9C,SAAiC,4BAA6B;AAC9D,SAAmC,8BAA+B;AAClE,SAAkC,6BAA8B;AAChE,SAAwB,mBAAoB;AAC5C,SAAsB,iBAAkB;AACxC;AAAA,EACgB;AAAA,OAIT;",
+  "sourcesContent": ["export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';\nexport {\n  FocusScope as _FocusScope,\n  type FocusScopeProps as _FocusScopeProps,\n} from './components/focus-scope/FocusScope.js';\n\nexport { type FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';\n\nexport { useCurrentTheme } from './hooks/useCurrentTheme.js';\nexport { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';\nexport {\n  FocusProvider as _FocusProvider,\n  type Modality as _Modality,\n} from './providers/FocusProvider.js';\nexport type { MaskingProps } from './types/masking-props.js';\nexport type { DataTestId } from './types/data-props.js';\nexport type { StylingProps } from './types/styling-props.js';\nexport type { WithChildren } from './types/with-children.js';\n\nexport { attemptFocus as _attemptFocus } from './utils/focus-management/attempt-focus.js';\nexport { focusFirstDescendant as _focusFirstDescendant } from './utils/focus-management/focus-first-descendant.js';\nexport { getFirstFocusableChild as _getFirstFocusableChild } from './utils/focus-management/get-first-focusable-child.js';\nexport { getLastFocusableChild as _getLastFocusableChild } from './utils/focus-management/get-last-focusable-child.js';\nexport { isFocusable as _isFocusable } from './utils/focus-management/is-focusable.js';\nexport { isBrowser as _isBrowser } from './utils/isBrowser.js';\nexport {\n  mergeProps as _mergeProps,\n  type NullToObject as _NullToObject,\n  type TupleTypes as _TupleTypes,\n  type UnionToIntersection as _UnionToIntersection,\n} from './utils/merge-props.js';\n"],
+  "mappings": "AAAA,SAAS,eAAkC;AAC3C;AAAA,EACgB;AAAA,OAET;AAIP,SAAS,uBAAuB;AAChC,SAA4B,uBAAwB;AACpD;AAAA,EACmB;AAAA,OAEZ;AAMP,SAAyB,oBAAqB;AAC9C,SAAiC,4BAA6B;AAC9D,SAAmC,8BAA+B;AAClE,SAAkC,6BAA8B;AAChE,SAAwB,mBAAoB;AAC5C,SAAsB,iBAAkB;AACxC;AAAA,EACgB;AAAA,OAIT;",
   "names": []
 }

package/esm/core/types/masking-props.js

@@ -0,0 +1 @@
+//# sourceMappingURL=masking-props.js.map

package/esm/core/types/masking-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynatrace/strato-components",
-  "version": "0.84.21",
+  "version": "0.84.31",
   "private": false,
   "license": "Apache-2.0",
   "lang": "lang/uncompiled",
@@ -42,7 +42,7 @@
     "clsx": "^2.1.0",
     "lodash-es": "^4.17.21",
     "wicg-inert": "^3.1.2",
-    "@dynatrace/strato-design-tokens": "0.20.10",
+    "@dynatrace/strato-design-tokens": "0.20.20",
     "@dynatrace/strato-icons": "0.37.0"
   },
   "peerDependencies": {

package/testing/custom-render.d.ts

@@ -1,4 +1,4 @@
-import { RenderOptions, RenderResult } from '@testing-library/react';
+import { type RenderOptions, type RenderResult } from '@testing-library/react';
 import React from 'react';
 type RenderWithIntlOptions = {
     locale?: string;

package/testing/mocks/resize-observer-mock.d.ts

@@ -1,4 +1,4 @@
-import { PartialDeep } from 'type-fest';
+import type { PartialDeep } from 'type-fest';
 /** Mock the Resize Observer */
 export declare function setupResizeObserverMock(
 /** When the Resize Observer should return specific results, you can pass them here */