@dynatrace/strato-components 0.84.12 → 0.84.31

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/styling-props.js

@@ -1 +1,15 @@
-var a=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var l=(t,e,i,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of c(e))!p.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(s=o(e,r))||s.enumerable});return t};var m=t=>l(a({},"__esModule",{value:!0}),t);var n={};module.exports=m(n);
+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 styling_props_exports = {};
+module.exports = __toCommonJS(styling_props_exports);

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/core/types/with-children.js

@@ -1 +1,15 @@
-var i=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var n=(t,e,o,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of d(e))!h.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(c=a(e,r))||c.enumerable});return t};var p=t=>n(i({},"__esModule",{value:!0}),t);var f={};module.exports=p(f);
+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 with_children_exports = {};
+module.exports = __toCommonJS(with_children_exports);

package/core/utils/focus-management/attempt-focus.js

@@ -1 +1,33 @@
-var o=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var i=(t,r)=>{for(var c in r)o(t,c,{get:r[c],enumerable:!0})},l=(t,r,c,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of n(r))!f.call(t,e)&&e!==c&&o(t,e,{get:()=>r[e],enumerable:!(u=a(r,e))||u.enumerable});return t};var m=t=>l(o({},"__esModule",{value:!0}),t);var v={};i(v,{attemptFocus:()=>p});module.exports=m(v);var s=require("./is-focusable.js");const p=t=>{if(!(0,s.isFocusable)(t))return!1;try{t.focus({preventScroll:!0})}catch{}return document.activeElement===t};
+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 attempt_focus_exports = {};
+__export(attempt_focus_exports, {
+  attemptFocus: () => attemptFocus
+});
+module.exports = __toCommonJS(attempt_focus_exports);
+var import_is_focusable = require("./is-focusable.js");
+const attemptFocus = (element) => {
+  if (!(0, import_is_focusable.isFocusable)(element)) {
+    return false;
+  }
+  try {
+    element.focus({ preventScroll: true });
+  } catch (e) {
+  }
+  return document.activeElement === element;
+};

package/core/utils/focus-management/focus-first-descendant.js

@@ -1 +1,35 @@
-var l=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var a=(r,t)=>{for(var e in t)l(r,e,{get:t[e],enumerable:!0})},d=(r,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of f(t))!u.call(r,n)&&n!==e&&l(r,n,{get:()=>t[n],enumerable:!(s=o(t,n))||s.enumerable});return r};var h=r=>d(l({},"__esModule",{value:!0}),r);var m={};a(m,{focusFirstDescendant:()=>i});module.exports=h(m);var c=require("./attempt-focus.js");const i=r=>{if(!r)return!1;for(let t=0;t<r.children.length;t++){const e=r.children[t];if((0,c.attemptFocus)(e)||i(e))return!0}return!1};
+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 focus_first_descendant_exports = {};
+__export(focus_first_descendant_exports, {
+  focusFirstDescendant: () => focusFirstDescendant
+});
+module.exports = __toCommonJS(focus_first_descendant_exports);
+var import_attempt_focus = require("./attempt-focus.js");
+const focusFirstDescendant = (element) => {
+  if (!element) {
+    return false;
+  }
+  for (let i = 0; i < element.children.length; i++) {
+    const child = element.children[i];
+    if ((0, import_attempt_focus.attemptFocus)(child) || focusFirstDescendant(child)) {
+      return true;
+    }
+  }
+  return false;
+};

package/core/utils/focus-management/get-first-focusable-child.js

@@ -1 +1,32 @@
-var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var a=(r,e)=>{for(var o in e)n(r,o,{get:e[o],enumerable:!0})},s=(r,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of d(e))!i.call(r,t)&&t!==o&&n(r,t,{get:()=>e[t],enumerable:!(l=c(e,t))||l.enumerable});return r};var N=r=>s(n({},"__esModule",{value:!0}),r);var f={};a(f,{getFirstFocusableChild:()=>m});module.exports=N(f);var u=require("./is-focusable.js");function m(r){const e=document.createTreeWalker(r);for(;e.nextNode();)if((0,u.isFocusable)(e.currentNode))return e.currentNode;return null}
+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 get_first_focusable_child_exports = {};
+__export(get_first_focusable_child_exports, {
+  getFirstFocusableChild: () => getFirstFocusableChild
+});
+module.exports = __toCommonJS(get_first_focusable_child_exports);
+var import_is_focusable = require("./is-focusable.js");
+function getFirstFocusableChild(container) {
+  const treeWalker = document.createTreeWalker(container);
+  while (treeWalker.nextNode()) {
+    if ((0, import_is_focusable.isFocusable)(treeWalker.currentNode)) {
+      return treeWalker.currentNode;
+    }
+  }
+  return null;
+}

package/core/utils/focus-management/get-last-focusable-child.js

@@ -1 +1,35 @@
-var o=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var c=(r,e)=>{for(var t in e)o(r,t,{get:e[t],enumerable:!0})},s=(r,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of d(e))!a.call(r,l)&&l!==t&&o(r,l,{get:()=>e[l],enumerable:!(n=i(e,l))||n.enumerable});return r};var h=r=>s(o({},"__esModule",{value:!0}),r);var N={};c(N,{getLastFocusableChild:()=>m});module.exports=h(N);var u=require("./is-focusable.js");function m(r){const e=document.createTreeWalker(r);for(;e.lastChild();)e.lastChild();do if((0,u.isFocusable)(e.currentNode))return e.currentNode;while(e.previousNode());return null}
+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 get_last_focusable_child_exports = {};
+__export(get_last_focusable_child_exports, {
+  getLastFocusableChild: () => getLastFocusableChild
+});
+module.exports = __toCommonJS(get_last_focusable_child_exports);
+var import_is_focusable = require("./is-focusable.js");
+function getLastFocusableChild(container) {
+  const treeWalker = document.createTreeWalker(container);
+  while (treeWalker.lastChild()) {
+    treeWalker.lastChild();
+  }
+  do {
+    if ((0, import_is_focusable.isFocusable)(treeWalker.currentNode)) {
+      return treeWalker.currentNode;
+    }
+  } while (treeWalker.previousNode());
+  return null;
+}

package/core/utils/focus-management/is-focusable.js

@@ -1 +1,39 @@
-var c=Object.defineProperty;var e=Object.getOwnPropertyDescriptor;var t=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var i=(a,r)=>{for(var u in r)c(a,u,{get:r[u],enumerable:!0})},T=(a,r,u,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of t(r))!n.call(a,s)&&s!==u&&c(a,s,{get:()=>r[s],enumerable:!(d=e(r,s))||d.enumerable});return a};var f=a=>T(c({},"__esModule",{value:!0}),a);var o={};i(o,{isFocusable:()=>b});module.exports=f(o);function b(a){if(a.tabIndex<0||a.disabled)return!1;switch(a.nodeName){case"A":return!!a.href;case"INPUT":return a.type!=="hidden";case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return a.tabIndex>=0}}
+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 is_focusable_exports = {};
+__export(is_focusable_exports, {
+  isFocusable: () => isFocusable
+});
+module.exports = __toCommonJS(is_focusable_exports);
+function isFocusable(element) {
+  if (element.tabIndex < 0 || element.disabled) {
+    return false;
+  }
+  switch (element.nodeName) {
+    case "A":
+      return !!element.href;
+    case "INPUT":
+      return element.type !== "hidden";
+    case "BUTTON":
+    case "SELECT":
+    case "TEXTAREA":
+      return true;
+    default:
+      return element.tabIndex >= 0;
+  }
+}

package/core/utils/isBrowser.js

@@ -1 +1,25 @@
-var d=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var u=(n,e)=>{for(var t in e)d(n,t,{get:e[t],enumerable:!0})},m=(n,e,t,w)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of i(e))!c.call(n,o)&&o!==t&&d(n,o,{get:()=>e[o],enumerable:!(w=r(e,o))||w.enumerable});return n};var s=n=>m(d({},"__esModule",{value:!0}),n);var p={};u(p,{isBrowser:()=>f});module.exports=s(p);const f=!!(typeof window<"u"&&window.document&&window.document.createElement);
+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 isBrowser_exports = {};
+__export(isBrowser_exports, {
+  isBrowser: () => isBrowser
+});
+module.exports = __toCommonJS(isBrowser_exports);
+const isBrowser = (() => {
+  return !!(typeof window !== "undefined" && window.document && window.document.createElement);
+})();

package/core/utils/merge-props.js

@@ -1 +1,50 @@
-var c=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var u=(o,e)=>{for(var t in e)c(o,t,{get:e[t],enumerable:!0})},y=(o,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of f(e))!p.call(o,n)&&n!==t&&c(o,n,{get:()=>e[n],enumerable:!(i=T(e,n))||i.enumerable});return o};var l=o=>y(c({},"__esModule",{value:!0}),o);var x={};u(x,{mergeProps:()=>a});module.exports=l(x);function d(...o){return(...e)=>{for(const t of o)typeof t=="function"&&t(...e)}}function a(...o){const e={...o[0]};for(let t=1;t<o.length;t++){const i=o[t];for(const n in i){const s=e[n],r=i[n];typeof s=="function"&&typeof r=="function"&&n[0]==="o"&&n[1]==="n"&&n.charCodeAt(2)>=65&&n.charCodeAt(2)<=90?e[n]=d(s,r):e[n]=r!==void 0?r:s}}return e}
+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 merge_props_exports = {};
+__export(merge_props_exports, {
+  mergeProps: () => mergeProps
+});
+module.exports = __toCommonJS(merge_props_exports);
+function chain(...callbacks) {
+  return (...args) => {
+    for (const callback of callbacks) {
+      if (typeof callback === "function") {
+        callback(...args);
+      }
+    }
+  };
+}
+function mergeProps(...args) {
+  const result = { ...args[0] };
+  for (let i = 1; i < args.length; i++) {
+    const props = args[i];
+    for (const key in props) {
+      const a = result[key];
+      const b = props[key];
+      if (typeof a === "function" && typeof b === "function" && // This is a lot faster than a regex.
+      key[0] === "o" && key[1] === "n" && key.charCodeAt(2) >= /* 'A' */
+      65 && key.charCodeAt(2) <= /* 'Z' */
+      90) {
+        result[key] = chain(a, b);
+      } else {
+        result[key] = b !== void 0 ? b : a;
+      }
+    }
+  }
+  return result;
+}

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

@@ -1700,6 +1700,7 @@ html, body {
 }
 body {
   font-size: var(--dt-typography-text-base-default-size, 14px);
+  line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
 }
 *::-webkit-scrollbar {
   width: 16px;

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

@@ -1,2 +1,93 @@
-import{isEmpty as f}from"lodash-es";import a,{forwardRef as h,useEffect as g,useLayoutEffect as i,useState as y}from"react";import{IntlProvider as E}from"react-intl";import"wicg-inert";import{getLanguage as P,getTimezone as v}from"@dynatrace-sdk/user-preferences";import"./AppRoot.sty.js";import{useCurrentTheme as T}from"../../hooks/useCurrentTheme.js";import{FocusProvider as I}from"../../providers/FocusProvider.js";function A(){const t=document.querySelector("base")?.href??"/";return t.endsWith("/")?t:`${t}/`}const C="en",F=h((r,t)=>{const{style:d,className:l,"data-testid":p="app-root"}=r,[c,m]=y({}),{children:u}=r,s=T(),o=P();let n=v();try{new Intl.DateTimeFormat(o,{timeZone:n})}catch{n=Intl.DateTimeFormat().resolvedOptions().timeZone}return i(()=>{const e=document.createElement("link");return e.rel="stylesheet",e.href="https://dt-cdn.net/fonts/fonts-v004.css",document.head.appendChild(e),()=>{document.head.removeChild(e)}},[]),i(()=>{document!==void 0&&document.documentElement.setAttribute("data-theme",s)},[s]),g(()=>{o!=="en"&&fetch(`${A()}lang/${o}.json`).then(e=>e.json()).then(e=>{m(e)}).catch(()=>{m(e=>f(e)?e:{})})},[o]),a.createElement("div",{ref:t,"data-testid":p,className:l,style:d,"data-theme":s},a.createElement(E,{locale:o,timeZone:n,messages:c,defaultLocale:C},a.createElement(I,null,u)))});F.displayName="AppRoot";export{F as AppRoot};
+import { isEmpty } from "lodash-es";
+import React, {
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useState
+} from "react";
+import { IntlProvider } from "react-intl";
+import "wicg-inert";
+import { getLanguage, getTimezone } from "@dynatrace-sdk/user-preferences";
+import "./AppRoot.sty.js";
+import { useCurrentTheme } from "../../hooks/useCurrentTheme.js";
+import { FocusProvider } from "../../providers/FocusProvider.js";
+function getBaseHref() {
+  const baseElement = document.querySelector("base");
+  const href = baseElement?.href ?? "/";
+  return href.endsWith("/") ? href : `${href}/`;
+}
+const defaultLanguage = "en";
+const AppRoot = /* @__PURE__ */ forwardRef(
+  (props, forwardedRef) => {
+    const {
+      style: consumerStyle,
+      className: consumerClassName,
+      "data-testid": dataTestId = "app-root",
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow
+    } = props;
+    const [messages, setMessages] = useState({});
+    const { children } = props;
+    const theme = useCurrentTheme();
+    const language = getLanguage();
+    let timezone = getTimezone();
+    try {
+      new Intl.DateTimeFormat(language, { timeZone: timezone });
+    } catch (error) {
+      timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+    useLayoutEffect(() => {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = "https://dt-cdn.net/fonts/fonts-v004.css";
+      document.head.appendChild(link);
+      return () => {
+        document.head.removeChild(link);
+      };
+    }, []);
+    useLayoutEffect(() => {
+      if (document !== void 0) {
+        document.documentElement.setAttribute("data-theme", theme);
+      }
+    }, [theme]);
+    useEffect(() => {
+      if (language === "en") {
+        return;
+      }
+      fetch(`${getBaseHref()}lang/${language}.json`).then((res) => {
+        return res.json();
+      }).then((receivedMessages) => {
+        setMessages(receivedMessages);
+      }).catch(() => {
+        setMessages((prev) => isEmpty(prev) ? prev : {});
+      });
+    }, [language]);
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: forwardedRef,
+        "data-testid": dataTestId,
+        className: consumerClassName,
+        style: consumerStyle,
+        "data-theme": theme,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow
+      },
+      /* @__PURE__ */ React.createElement(
+        IntlProvider,
+        {
+          locale: language,
+          timeZone: timezone,
+          messages,
+          defaultLocale: defaultLanguage
+        },
+        /* @__PURE__ */ React.createElement(FocusProvider, null, children)
+      )
+    );
+  }
+);
+AppRoot.displayName = "AppRoot";
+export {
+  AppRoot
+};
 //# sourceMappingURL=AppRoot.js.map

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,OAAS,WAAAA,MAAe,YACxB,OAAOC,GAEL,cAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,YAAAC,MACK,QACP,OAAS,gBAAAC,MAA+C,aAExD,MAAO,aACP,OAAS,eAAAC,EAAa,eAAAC,MAAmB,kCAEzC,MAAO,mBACP,OAAS,mBAAAC,MAAuB,iCAChC,OAAS,iBAAAC,MAAqB,mCAQ9B,SAASC,GAAsB,CAE7B,MAAMC,EADc,SAAS,cAAc,MAAM,GACvB,MAAQ,IAClC,OAAOA,EAAK,SAAS,GAAG,EAAIA,EAAO,GAAGA,CAAI,GAC5C,CAKA,MAAMC,EAAkB,KAQXC,EAA0BZ,EACrC,CAACa,EAAOC,IAAiB,CACvB,KAAM,CACJ,MAAOC,EACP,UAAWC,EACX,cAAeC,EAAa,UAC9B,EAAIJ,EAGE,CAACK,EAAUC,CAAW,EAAIhB,EAE9B,CAAC,CAAC,EAEE,CAAE,SAAAiB,CAAS,EAAIP,EAEfQ,EAAQd,EAAgB,EACxBe,EAAWjB,EAAY,EAC7B,IAAIkB,EAAWjB,EAAY,EAC3B,GAAI,CACF,IAAI,KAAK,eAAegB,EAAU,CAAE,SAAUC,CAAS,CAAC,CAC1D,MAAgB,CAGdA,EAAW,KAAK,eAAe,EAAE,gBAAgB,EAAE,QACrD,CAGA,OAAArB,EAAgB,IAAM,CAMpB,MAAMsB,EAAO,SAAS,cAAc,MAAM,EAE1C,OAAAA,EAAK,IAAM,aACXA,EAAK,KAAO,0CACZ,SAAS,KAAK,YAAYA,CAAI,EACvB,IAAM,CACX,SAAS,KAAK,YAAYA,CAAI,CAChC,CACF,EAAG,CAAC,CAAC,EAMLtB,EAAgB,IAAM,CAChB,WAAa,QACf,SAAS,gBAAgB,aAAa,aAAcmB,CAAK,CAE7D,EAAG,CAACA,CAAK,CAAC,EAEVpB,EAAU,IAAM,CACVqB,IAAa,MAMjB,MAAM,GAAGb,EAAY,CAAC,QAAQa,CAAQ,OAAO,EAC1C,KAAMG,GACEA,EAAI,KAAK,CACjB,EACA,KAAMC,GAAqB,CAC1BP,EAAYO,CAAgB,CAC9B,CAAC,EACA,MAAM,IAAM,CAIXP,EAAaQ,GAAU7B,EAAQ6B,CAAI,EAAIA,EAAO,CAAC,CAAE,CACnD,CAAC,CACL,EAAG,CAACL,CAAQ,CAAC,EAGXvB,EAAA,cAAC,OACC,IAAKe,EACL,cAAaG,EACb,UAAWD,EACX,MAAOD,EACP,aAAYM,GAEZtB,EAAA,cAACK,EAAA,CACC,OAAQkB,EACR,SAAUC,EACV,SAAUL,EACV,cAAeP,GAEfZ,EAAA,cAACS,EAAA,KAAeY,CAAS,CAC3B,CACF,CAEJ,CACF,EAECR,EAAqD,YAAc",
-  "names": ["isEmpty", "React", "forwardRef", "useEffect", "useLayoutEffect", "useState", "IntlProvider", "getLanguage", "getTimezone", "useCurrentTheme", "FocusProvider", "getBaseHref", "href", "defaultLanguage", "AppRoot", "props", "forwardedRef", "consumerStyle", "consumerClassName", "dataTestId", "messages", "setMessages", "children", "theme", "language", "timezone", "link", "res", "receivedMessages", "prev"]
+  "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/components/app-root/AppRoot.sty.js

@@ -1,2 +1,2 @@
-import"./AppRoot.css";
+import "./AppRoot.css";
 //# sourceMappingURL=AppRoot.sty.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/core/components/app-root/AppRoot.css.ts"],
   "sourcesContent": ["import './AppRoot.css';"],
-  "mappings": "AAAA,MAAO",
+  "mappings": "AAAA,OAAO;",
   "names": []
 }

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

@@ -1,2 +1,53 @@
-import d,{useEffect as p,useRef as c}from"react";import{useActiveElement as m}from"../../hooks/useActiveElement.js";import{useFocusContext as h}from"../../hooks/useFocusContext.js";import{focusFirstDescendant as i}from"../../utils/focus-management/focus-first-descendant.js";const g=u=>{const{autoFocus:o,contain:t,children:a}=u,s=h(),r=c(null),l=m(),n=c(l);return p(()=>{if((t||o)&&i(r.current),t){s.setBackgroundInertness(!0);const e=n.current;return()=>{s.setBackgroundInertness(!1),window.setTimeout(()=>e.focus(),0)}}!o&&!t&&document.addEventListener("keydown",e=>{e.key==="Tab"&&e.target===n.current&&(e.preventDefault(),i(r.current))});const f=n.current;return()=>{f.focus()}},[t,o]),d.createElement("div",{style:{display:"contents"},ref:r,"aria-labelledby":n.current.id},a)};g.displayName="FocusScope";export{g as FocusScope};
+import React, { useEffect, useRef } from "react";
+import { useActiveElement } from "../../hooks/useActiveElement.js";
+import { useFocusContext } from "../../hooks/useFocusContext.js";
+import { focusFirstDescendant } from "../../utils/focus-management/focus-first-descendant.js";
+const FocusScope = (props) => {
+  const { autoFocus, contain, children } = props;
+  const focusContext = useFocusContext();
+  const wrapperRef = useRef(null);
+  const focusedElement = useActiveElement();
+  const triggerElement = useRef(focusedElement);
+  useEffect(() => {
+    if (contain || autoFocus) {
+      focusFirstDescendant(wrapperRef.current);
+    }
+    if (contain) {
+      focusContext.setBackgroundInertness(true);
+      const triggerElementCopy2 = triggerElement.current;
+      return () => {
+        focusContext.setBackgroundInertness(false);
+        window.setTimeout(() => triggerElementCopy2.focus(), 0);
+      };
+    }
+    if (!autoFocus && !contain) {
+      document.addEventListener("keydown", (e) => {
+        if (e.key !== "Tab") {
+          return;
+        }
+        if (e.target === triggerElement.current) {
+          e.preventDefault();
+          focusFirstDescendant(wrapperRef.current);
+        }
+      });
+    }
+    const triggerElementCopy = triggerElement.current;
+    return () => {
+      triggerElementCopy.focus();
+    };
+  }, [contain, autoFocus]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: { display: "contents" },
+      ref: wrapperRef,
+      "aria-labelledby": triggerElement.current.id
+    },
+    children
+  );
+};
+FocusScope.displayName = "FocusScope";
+export {
+  FocusScope
+};
 //# sourceMappingURL=FocusScope.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/core/components/focus-scope/FocusScope.tsx"],
   "sourcesContent": ["import React, { useEffect, useRef } from 'react';\n\nimport { useActiveElement } from '../../hooks/useActiveElement.js';\nimport { useFocusContext } from '../../hooks/useFocusContext.js';\nimport type { WithChildren } from '../../types/with-children.js';\nimport { focusFirstDescendant } from '../../utils/focus-management/focus-first-descendant.js';\n\n// #region Types\n\n/**\n * Prop definition of the `FocusScope` component.\n * @internal\n */\nexport interface FocusScopeProps extends WithChildren {\n  /**\n   * If set to true, the focus scope automatically focuses the first focusable element inside.\n   * @defaultValue false\n   */\n  autoFocus?: boolean;\n  /**\n   * If set to true, the focus scope traps the focus inside.\n   * @defaultValue false\n   */\n  contain?: boolean;\n}\n// #endregion Types\n\n/**\n * @internal\n * The `FocusScope` helps you manage the focus when opening any overlay. If you\n * want to create a custom overlay, you can wrap the content of your overlay in the\n * `FocusScope` to help you make the overlay accessible and handle focus\n * appropriately.\n */\nexport const FocusScope = (props: FocusScopeProps) => {\n  const { autoFocus, contain, children } = props;\n  const focusContext = useFocusContext();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const focusedElement = useActiveElement();\n  const triggerElement = useRef(focusedElement);\n\n  useEffect(() => {\n    if (contain || autoFocus) {\n      focusFirstDescendant(wrapperRef.current);\n    }\n\n    if (contain) {\n      focusContext.setBackgroundInertness(true);\n      const triggerElementCopy = triggerElement.current;\n\n      return () => {\n        focusContext.setBackgroundInertness(false);\n        // The focus must be restored on the trigger after removing the inert prop on\n        // AppRoot (rendering complete). SetTimeout creates a macrotask to change queueing order.\n        window.setTimeout(() => triggerElementCopy.focus(), 0);\n      };\n    }\n\n    if (!autoFocus && !contain) {\n      document.addEventListener('keydown', (e) => {\n        if (e.key !== 'Tab') {\n          return;\n        }\n\n        if (e.target === triggerElement.current) {\n          e.preventDefault();\n          focusFirstDescendant(wrapperRef.current);\n        }\n      });\n    }\n\n    const triggerElementCopy = triggerElement.current;\n\n    return () => {\n      // restore focus on trigger when unmounting the focusscope\n      triggerElementCopy.focus();\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [contain, autoFocus]);\n\n  return (\n    <div\n      style={{ display: 'contents' }}\n      ref={wrapperRef}\n      aria-labelledby={triggerElement.current.id}\n      // Prevents that focus is lost when clicking on non-focusable items inside (atm used in the internal Drawer).\n      // Probably worth considering moving that to the focusScope when redoing the overlays.\n      // tabIndex={-1}\n    >\n      {children}\n    </div>\n  );\n};\n\nFocusScope.displayName = 'FocusScope';\n"],
-  "mappings": "AAAA,OAAOA,GAAS,aAAAC,EAAW,UAAAC,MAAc,QAEzC,OAAS,oBAAAC,MAAwB,kCACjC,OAAS,mBAAAC,MAAuB,iCAEhC,OAAS,wBAAAC,MAA4B,yDA6B9B,MAAMC,EAAcC,GAA2B,CACpD,KAAM,CAAE,UAAAC,EAAW,QAAAC,EAAS,SAAAC,CAAS,EAAIH,EACnCI,EAAeP,EAAgB,EAC/BQ,EAAaV,EAAuB,IAAI,EACxCW,EAAiBV,EAAiB,EAClCW,EAAiBZ,EAAOW,CAAc,EAE5C,OAAAZ,EAAU,IAAM,CAKd,IAJIQ,GAAWD,IACbH,EAAqBO,EAAW,OAAO,EAGrCH,EAAS,CACXE,EAAa,uBAAuB,EAAI,EACxC,MAAMI,EAAqBD,EAAe,QAE1C,MAAO,IAAM,CACXH,EAAa,uBAAuB,EAAK,EAGzC,OAAO,WAAW,IAAMI,EAAmB,MAAM,EAAG,CAAC,CACvD,CACF,CAEI,CAACP,GAAa,CAACC,GACjB,SAAS,iBAAiB,UAAY,GAAM,CACtC,EAAE,MAAQ,OAIV,EAAE,SAAWK,EAAe,UAC9B,EAAE,eAAe,EACjBT,EAAqBO,EAAW,OAAO,EAE3C,CAAC,EAGH,MAAMG,EAAqBD,EAAe,QAE1C,MAAO,IAAM,CAEXC,EAAmB,MAAM,CAC3B,CAGF,EAAG,CAACN,EAASD,CAAS,CAAC,EAGrBR,EAAA,cAAC,OACC,MAAO,CAAE,QAAS,UAAW,EAC7B,IAAKY,EACL,kBAAiBE,EAAe,QAAQ,IAKvCJ,CACH,CAEJ,EAEAJ,EAAW,YAAc",
-  "names": ["React", "useEffect", "useRef", "useActiveElement", "useFocusContext", "focusFirstDescendant", "FocusScope", "props", "autoFocus", "contain", "children", "focusContext", "wrapperRef", "focusedElement", "triggerElement", "triggerElementCopy"]
+  "mappings": "AAAA,OAAO,SAAS,WAAW,cAAc;AAEzC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAEhC,SAAS,4BAA4B;AA6B9B,MAAM,aAAa,CAAC,UAA2B;AACpD,QAAM,EAAE,WAAW,SAAS,SAAS,IAAI;AACzC,QAAM,eAAe,gBAAgB;AACrC,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,iBAAiB,OAAO,cAAc;AAE5C,YAAU,MAAM;AACd,QAAI,WAAW,WAAW;AACxB,2BAAqB,WAAW,OAAO;AAAA,IACzC;AAEA,QAAI,SAAS;AACX,mBAAa,uBAAuB,IAAI;AACxC,YAAMA,sBAAqB,eAAe;AAE1C,aAAO,MAAM;AACX,qBAAa,uBAAuB,KAAK;AAGzC,eAAO,WAAW,MAAMA,oBAAmB,MAAM,GAAG,CAAC;AAAA,MACvD;AAAA,IACF;AAEA,QAAI,CAAC,aAAa,CAAC,SAAS;AAC1B,eAAS,iBAAiB,WAAW,CAAC,MAAM;AAC1C,YAAI,EAAE,QAAQ,OAAO;AACnB;AAAA,QACF;AAEA,YAAI,EAAE,WAAW,eAAe,SAAS;AACvC,YAAE,eAAe;AACjB,+BAAqB,WAAW,OAAO;AAAA,QACzC;AAAA,MACF,CAAC;AAAA,IACH;AAEA,UAAM,qBAAqB,eAAe;AAE1C,WAAO,MAAM;AAEX,yBAAmB,MAAM;AAAA,IAC3B;AAAA,EAGF,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,WAAW;AAAA,MAC7B,KAAK;AAAA,MACL,mBAAiB,eAAe,QAAQ;AAAA;AAAA,IAKvC;AAAA,EACH;AAEJ;AAEA,WAAW,cAAc;",
+  "names": ["triggerElementCopy"]
 }

package/esm/core/contexts/FocusContext.js

@@ -1,2 +1,10 @@
-import{createContext as o}from"react";const s=o({modality:"unknown",backgroundInertness:void 0,setBackgroundInertness:e=>null});export{s as FocusContext};
+import { createContext } from "react";
+const FocusContext = createContext({
+  modality: "unknown",
+  backgroundInertness: void 0,
+  setBackgroundInertness: (value) => null
+});
+export {
+  FocusContext
+};
 //# sourceMappingURL=FocusContext.js.map