@dynatrace/strato-components 0.84.12 → 0.84.31

package/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/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

@@ -1 +1,116 @@
-var T=Object.create;var i=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var R=(e,t)=>{for(var s in t)i(e,s,{get:t[s],enumerable:!0})},u=(e,t,s,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of A(t))!F.call(e,n)&&n!==s&&i(e,n,{get:()=>t[n],enumerable:!(m=I(t,n))||m.enumerable});return e};var D=(e,t,s)=>(s=e!=null?T(C(e)):{},u(t||!e||!e.__esModule?i(s,"default",{value:e,enumerable:!0}):s,e)),L=e=>u(i({},"__esModule",{value:!0}),e);var b={};R(b,{AppRoot:()=>E});module.exports=L(b);var f=require("lodash"),o=D(require("react")),h=require("react-intl"),W=require("wicg-inert"),d=require("@dynatrace-sdk/user-preferences"),Z=require("./AppRoot.sty.js"),g=require("../../hooks/useCurrentTheme.js"),y=require("../../providers/FocusProvider.js");function N(){const t=document.querySelector("base")?.href??"/";return t.endsWith("/")?t:`${t}/`}const S="en",E=(0,o.forwardRef)((e,t)=>{const{style:s,className:m,"data-testid":n="app-root"}=e,[P,c]=(0,o.useState)({}),{children:v}=e,l=(0,g.useCurrentTheme)(),a=(0,d.getLanguage)();let p=(0,d.getTimezone)();try{new Intl.DateTimeFormat(a,{timeZone:p})}catch{p=Intl.DateTimeFormat().resolvedOptions().timeZone}return(0,o.useLayoutEffect)(()=>{const r=document.createElement("link");return r.rel="stylesheet",r.href="https://dt-cdn.net/fonts/fonts-v004.css",document.head.appendChild(r),()=>{document.head.removeChild(r)}},[]),(0,o.useLayoutEffect)(()=>{document!==void 0&&document.documentElement.setAttribute("data-theme",l)},[l]),(0,o.useEffect)(()=>{a!=="en"&&fetch(`${N()}lang/${a}.json`).then(r=>r.json()).then(r=>{c(r)}).catch(()=>{c(r=>(0,f.isEmpty)(r)?r:{})})},[a]),o.default.createElement("div",{ref:t,"data-testid":n,className:m,style:s,"data-theme":l},o.default.createElement(h.IntlProvider,{locale:a,timeZone:p,messages:P,defaultLocale:S},o.default.createElement(y.FocusProvider,null,v)))});E.displayName="AppRoot";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AppRoot_exports = {};
+__export(AppRoot_exports, {
+  AppRoot: () => AppRoot
+});
+module.exports = __toCommonJS(AppRoot_exports);
+var import_lodash_es = require("lodash");
+var import_react = __toESM(require("react"));
+var import_react_intl = require("react-intl");
+var import_wicg_inert = require("wicg-inert");
+var import_user_preferences = require("@dynatrace-sdk/user-preferences");
+var import_AppRoot_css = require("./AppRoot.sty.js");
+var import_useCurrentTheme = require("../../hooks/useCurrentTheme.js");
+var import_FocusProvider = require("../../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__ */ (0, import_react.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] = (0, import_react.useState)({});
+    const { children } = props;
+    const theme = (0, import_useCurrentTheme.useCurrentTheme)();
+    const language = (0, import_user_preferences.getLanguage)();
+    let timezone = (0, import_user_preferences.getTimezone)();
+    try {
+      new Intl.DateTimeFormat(language, { timeZone: timezone });
+    } catch (error) {
+      timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+    (0, import_react.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);
+      };
+    }, []);
+    (0, import_react.useLayoutEffect)(() => {
+      if (document !== void 0) {
+        document.documentElement.setAttribute("data-theme", theme);
+      }
+    }, [theme]);
+    (0, import_react.useEffect)(() => {
+      if (language === "en") {
+        return;
+      }
+      fetch(`${getBaseHref()}lang/${language}.json`).then((res) => {
+        return res.json();
+      }).then((receivedMessages) => {
+        setMessages(receivedMessages);
+      }).catch(() => {
+        setMessages((prev) => (0, import_lodash_es.isEmpty)(prev) ? prev : {});
+      });
+    }, [language]);
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: forwardedRef,
+        "data-testid": dataTestId,
+        className: consumerClassName,
+        style: consumerStyle,
+        "data-theme": theme,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_react_intl.IntlProvider,
+        {
+          locale: language,
+          timeZone: timezone,
+          messages,
+          defaultLocale: defaultLanguage
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_FocusProvider.FocusProvider, null, children)
+      )
+    );
+  }
+);
+AppRoot.displayName = "AppRoot";

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

@@ -1 +1 @@
-var i=require("./AppRoot.css");
+var import_AppRoot_css_ts_vanilla = require("./AppRoot.css");

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

@@ -1 +1,81 @@
-var y=Object.create;var u=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var F=(e,t)=>{for(var n in t)u(e,n,{get:t[n],enumerable:!0})},f=(e,t,n,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of v(t))!E.call(e,o)&&o!==n&&u(e,o,{get:()=>t[o],enumerable:!(c=b(t,o))||c.enumerable});return e};var x=(e,t,n)=>(n=e!=null?y(w(e)):{},f(t||!e||!e.__esModule?u(n,"default",{value:e,enumerable:!0}):n,e)),C=e=>f(u({},"__esModule",{value:!0}),e);var k={};F(k,{FocusScope:()=>m});module.exports=C(k);var r=x(require("react")),d=require("../../hooks/useActiveElement.js"),p=require("../../hooks/useFocusContext.js"),l=require("../../utils/focus-management/focus-first-descendant.js");const m=e=>{const{autoFocus:t,contain:n,children:c}=e,o=(0,p.useFocusContext)(),a=(0,r.useRef)(null),h=(0,d.useActiveElement)(),i=(0,r.useRef)(h);return(0,r.useEffect)(()=>{if((n||t)&&(0,l.focusFirstDescendant)(a.current),n){o.setBackgroundInertness(!0);const s=i.current;return()=>{o.setBackgroundInertness(!1),window.setTimeout(()=>s.focus(),0)}}!t&&!n&&document.addEventListener("keydown",s=>{s.key==="Tab"&&s.target===i.current&&(s.preventDefault(),(0,l.focusFirstDescendant)(a.current))});const g=i.current;return()=>{g.focus()}},[n,t]),r.default.createElement("div",{style:{display:"contents"},ref:a,"aria-labelledby":i.current.id},c)};m.displayName="FocusScope";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FocusScope_exports = {};
+__export(FocusScope_exports, {
+  FocusScope: () => FocusScope
+});
+module.exports = __toCommonJS(FocusScope_exports);
+var import_react = __toESM(require("react"));
+var import_useActiveElement = require("../../hooks/useActiveElement.js");
+var import_useFocusContext = require("../../hooks/useFocusContext.js");
+var import_focus_first_descendant = require("../../utils/focus-management/focus-first-descendant.js");
+const FocusScope = (props) => {
+  const { autoFocus, contain, children } = props;
+  const focusContext = (0, import_useFocusContext.useFocusContext)();
+  const wrapperRef = (0, import_react.useRef)(null);
+  const focusedElement = (0, import_useActiveElement.useActiveElement)();
+  const triggerElement = (0, import_react.useRef)(focusedElement);
+  (0, import_react.useEffect)(() => {
+    if (contain || autoFocus) {
+      (0, import_focus_first_descendant.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();
+          (0, import_focus_first_descendant.focusFirstDescendant)(wrapperRef.current);
+        }
+      });
+    }
+    const triggerElementCopy = triggerElement.current;
+    return () => {
+      triggerElementCopy.focus();
+    };
+  }, [contain, autoFocus]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: { display: "contents" },
+      ref: wrapperRef,
+      "aria-labelledby": triggerElement.current.id
+    },
+    children
+  );
+};
+FocusScope.displayName = "FocusScope";

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/contexts/FocusContext.js

@@ -1 +1,28 @@
-var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var c=(e,o)=>{for(var t in o)r(e,t,{get:o[t],enumerable:!0})},i=(e,o,t,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of d(o))!l.call(e,n)&&n!==t&&r(e,n,{get:()=>o[n],enumerable:!(s=u(o,n))||s.enumerable});return e};var p=e=>i(r({},"__esModule",{value:!0}),e);var x={};c(x,{FocusContext:()=>m});module.exports=p(x);var a=require("react");const m=(0,a.createContext)({modality:"unknown",backgroundInertness:void 0,setBackgroundInertness:e=>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 FocusContext_exports = {};
+__export(FocusContext_exports, {
+  FocusContext: () => FocusContext
+});
+module.exports = __toCommonJS(FocusContext_exports);
+var import_react = require("react");
+const FocusContext = (0, import_react.createContext)({
+  modality: "unknown",
+  backgroundInertness: void 0,
+  setBackgroundInertness: (value) => null
+});

package/core/hooks/useActiveElement.js

@@ -1 +1,36 @@
-var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var E=(t,e)=>{for(var n in e)m(t,n,{get:e[n],enumerable:!0})},v=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of i(e))!r.call(t,c)&&c!==n&&m(t,c,{get:()=>e[c],enumerable:!(s=u(e,c))||s.enumerable});return t};var a=t=>v(m({},"__esModule",{value:!0}),t);var l={};E(l,{useActiveElement:()=>d});module.exports=a(l);var o=require("react");const d=()=>{const[t,e]=(0,o.useState)(document.activeElement),n=s=>{e(document.activeElement)};return(0,o.useEffect)(()=>(document.addEventListener("focusin",n),()=>{document.removeEventListener("focusin",n)}),[]),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 useActiveElement_exports = {};
+__export(useActiveElement_exports, {
+  useActiveElement: () => useActiveElement
+});
+module.exports = __toCommonJS(useActiveElement_exports);
+var import_react = require("react");
+const useActiveElement = () => {
+  const [active, setActive] = (0, import_react.useState)(document.activeElement);
+  const handleFocusIn = (e) => {
+    setActive(document.activeElement);
+  };
+  (0, import_react.useEffect)(() => {
+    document.addEventListener("focusin", handleFocusIn);
+    return () => {
+      document.removeEventListener("focusin", handleFocusIn);
+    };
+  }, []);
+  return active;
+};

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/hooks/useCurrentTheme.js

@@ -1 +1,54 @@
-var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var f=(r,e)=>{for(var o in e)s(r,o,{get:e[o],enumerable:!0})},g=(r,e,o,h)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!d.call(r,t)&&t!==o&&s(r,t,{get:()=>e[t],enumerable:!(h=c(e,t))||h.enumerable});return r};var l=r=>g(s({},"__esModule",{value:!0}),r);var p={};f(p,{useCurrentTheme:()=>k});module.exports=l(p);var n=require("react"),m=require("@dynatrace-sdk/user-preferences"),i=require("../utils/isBrowser.js");function k(){const r=(0,n.useMemo)(()=>(0,m.getTheme)(),[]);if(r==="dark"||r==="light")return r;if(!i.isBrowser)return"light";const e=(0,n.useMemo)(()=>window&&window.matchMedia("(prefers-color-scheme: dark)"),[]),[o,h]=(0,n.useState)(e.matches?"dark":"light");return(0,n.useEffect)(()=>{const t=()=>{const a=e.matches;h(a?"dark":"light")};return e.addEventListener("change",t),()=>{e.removeEventListener("change",t)}},[e]),o}
+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 useCurrentTheme_exports = {};
+__export(useCurrentTheme_exports, {
+  useCurrentTheme: () => useCurrentTheme
+});
+module.exports = __toCommonJS(useCurrentTheme_exports);
+var import_react = require("react");
+var import_user_preferences = require("@dynatrace-sdk/user-preferences");
+var import_isBrowser = require("../utils/isBrowser.js");
+function useCurrentTheme() {
+  const sdkTheme = (0, import_react.useMemo)(() => {
+    return (0, import_user_preferences.getTheme)();
+  }, []);
+  if (sdkTheme === "dark" || sdkTheme === "light") {
+    return sdkTheme;
+  }
+  if (!import_isBrowser.isBrowser) {
+    return "light";
+  }
+  const themeQuery = (0, import_react.useMemo)(
+    () => window && window.matchMedia("(prefers-color-scheme: dark)"),
+    []
+  );
+  const [currentTheme, setCurrentTheme] = (0, import_react.useState)(
+    themeQuery.matches ? "dark" : "light"
+  );
+  (0, import_react.useEffect)(() => {
+    const handlePrefersColorSchemeChange = () => {
+      const prefersDark = themeQuery.matches;
+      setCurrentTheme(prefersDark ? "dark" : "light");
+    };
+    themeQuery.addEventListener("change", handlePrefersColorSchemeChange);
+    return () => {
+      themeQuery.removeEventListener("change", handlePrefersColorSchemeChange);
+    };
+  }, [themeQuery]);
+  return currentTheme;
+}

package/core/hooks/useFocusContext.js

@@ -1 +1,27 @@
-var s=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var m=(t,o)=>{for(var r in o)s(t,r,{get:o[r],enumerable:!0})},F=(t,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of c(o))!C.call(t,e)&&e!==r&&s(t,e,{get:()=>o[e],enumerable:!(n=x(o,e))||n.enumerable});return t};var f=t=>F(s({},"__esModule",{value:!0}),t);var P={};m(P,{useFocusContext:()=>i});module.exports=f(P);var u=require("react"),p=require("../contexts/FocusContext.js");const i=()=>(0,u.useContext)(p.FocusContext);
+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 useFocusContext_exports = {};
+__export(useFocusContext_exports, {
+  useFocusContext: () => useFocusContext
+});
+module.exports = __toCommonJS(useFocusContext_exports);
+var import_react = require("react");
+var import_FocusContext = require("../contexts/FocusContext.js");
+const useFocusContext = () => {
+  return (0, import_react.useContext)(import_FocusContext.FocusContext);
+};

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/index.js

@@ -1 +1,45 @@
-var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var T=(e,o)=>{for(var t in o)r(e,t,{get:o[t],enumerable:!0})},h=(e,o,t,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of C(o))!P.call(e,s)&&s!==t&&r(e,s,{get:()=>o[s],enumerable:!(p=d(o,s))||p.enumerable});return e};var b=e=>h(r({},"__esModule",{value:!0}),e);var g={};T(g,{AppRoot:()=>a.AppRoot,_FocusProvider:()=>l.FocusProvider,_FocusScope:()=>c.FocusScope,_attemptFocus:()=>F.attemptFocus,_focusFirstDescendant:()=>m.focusFirstDescendant,_getFirstFocusableChild:()=>n.getFirstFocusableChild,_getLastFocusableChild:()=>x.getLastFocusableChild,_isBrowser:()=>f.isBrowser,_isFocusable:()=>y.isFocusable,_mergeProps:()=>_.mergeProps,_useFocusContext:()=>i.useFocusContext,useCurrentTheme:()=>u.useCurrentTheme});module.exports=b(g);var a=require("./components/app-root/AppRoot.js"),c=require("./components/focus-scope/FocusScope.js"),u=require("./hooks/useCurrentTheme.js"),i=require("./hooks/useFocusContext.js"),l=require("./providers/FocusProvider.js"),F=require("./utils/focus-management/attempt-focus.js"),m=require("./utils/focus-management/focus-first-descendant.js"),n=require("./utils/focus-management/get-first-focusable-child.js"),x=require("./utils/focus-management/get-last-focusable-child.js"),y=require("./utils/focus-management/is-focusable.js"),f=require("./utils/isBrowser.js"),_=require("./utils/merge-props.js");
+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 core_exports = {};
+__export(core_exports, {
+  AppRoot: () => import_AppRoot.AppRoot,
+  _FocusProvider: () => import_FocusProvider.FocusProvider,
+  _FocusScope: () => import_FocusScope.FocusScope,
+  _attemptFocus: () => import_attempt_focus.attemptFocus,
+  _focusFirstDescendant: () => import_focus_first_descendant.focusFirstDescendant,
+  _getFirstFocusableChild: () => import_get_first_focusable_child.getFirstFocusableChild,
+  _getLastFocusableChild: () => import_get_last_focusable_child.getLastFocusableChild,
+  _isBrowser: () => import_isBrowser.isBrowser,
+  _isFocusable: () => import_is_focusable.isFocusable,
+  _mergeProps: () => import_merge_props.mergeProps,
+  _useFocusContext: () => import_useFocusContext.useFocusContext,
+  useCurrentTheme: () => import_useCurrentTheme.useCurrentTheme
+});
+module.exports = __toCommonJS(core_exports);
+var import_AppRoot = require("./components/app-root/AppRoot.js");
+var import_FocusScope = require("./components/focus-scope/FocusScope.js");
+var import_useCurrentTheme = require("./hooks/useCurrentTheme.js");
+var import_useFocusContext = require("./hooks/useFocusContext.js");
+var import_FocusProvider = require("./providers/FocusProvider.js");
+var import_attempt_focus = require("./utils/focus-management/attempt-focus.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");
+var import_is_focusable = require("./utils/focus-management/is-focusable.js");
+var import_isBrowser = require("./utils/isBrowser.js");
+var import_merge_props = require("./utils/merge-props.js");

package/core/providers/FocusProvider.js

@@ -1 +1,146 @@
-var k=Object.create;var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var M=(e,o)=>{for(var n in o)a(e,n,{get:o[n],enumerable:!0})},p=(e,o,n,d)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of f(o))!L.call(e,r)&&r!==n&&a(e,r,{get:()=>o[r],enumerable:!(d=v(o,r))||d.enumerable});return e};var g=(e,o,n)=>(n=e!=null?k(b(e)):{},p(o||!e||!e.__esModule?a(n,"default",{value:e,enumerable:!0}):n,e)),E=e=>p(a({},"__esModule",{value:!0}),e);var S={};M(S,{FocusProvider:()=>m});module.exports=E(S);var t=g(require("react")),w=require("../contexts/FocusContext.js"),l=require("../hooks/useFocusContext.js"),y=require("../utils/merge-props.js");const P=["Alt","AltGraph","CapsLock","Control","Fn","FnLock","Hyper","Meta","NumLock","OS","ScrollLock","Super","Symbol","SymbolLock"],C={keydown:"keyboard",keyup:"keyboard",mousedown:"mouse",mousemove:"mouse",MSPointerDown:"pointer",MSPointerMove:"pointer",pointerdown:"pointer",pointermove:"pointer",touchstart:"touch",touchend:"touch",wheel:"wheel"},x=["Tab","Esc","Escape"," ","ArrowDown","Down","ArrowUp","Up","ArrowLeft","Left","ArrowRight","Right","End","Home","PageDown","PageUp"],m=({children:e})=>{const[o,n]=(0,t.useState)(!1),d=(0,l.useFocusContext)(),[r,u]=(0,t.useState)("unknown"),c=(0,t.useCallback)(s=>{if(P.includes(s.key)){u("pointer");return}(!s.target||x.includes(s.key))&&u("keyboard")},[]),i=(0,t.useCallback)(s=>{switch(C[s.type]){case"touch":case"pen":return u("touch");case"mouse":case"pointer":case"wheel":return u("pointer");default:return"unknown"}},[]);(0,t.useEffect)(()=>(window.addEventListener("pointerdown",i),window.addEventListener("keydown",c,{capture:!0}),window.addEventListener("wheel",i),()=>{window.removeEventListener("pointerdown",i),window.removeEventListener("keydown",c,{capture:!0}),window.removeEventListener("wheel",i)}),[c,i]);const h=o?{inert:"true",tabIndex:-1,"aria-hidden":!0}:{inert:void 0,tabIndex:void 0,"aria-hidden":!1};return t.default.createElement(w.FocusContext.Provider,{value:{...(0,y.mergeProps)(d,{backgroundInertness:o,setBackgroundInertness:n,modality:r})}},t.default.createElement("div",{...h},e))};m.displayName="FocusProvider";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FocusProvider_exports = {};
+__export(FocusProvider_exports, {
+  FocusProvider: () => FocusProvider
+});
+module.exports = __toCommonJS(FocusProvider_exports);
+var import_react = __toESM(require("react"));
+var import_FocusContext = require("../contexts/FocusContext.js");
+var import_useFocusContext = require("../hooks/useFocusContext.js");
+var import_merge_props = require("../utils/merge-props.js");
+const ignoreMap = [
+  "Alt",
+  "AltGraph",
+  "CapsLock",
+  "Control",
+  "Fn",
+  "FnLock",
+  "Hyper",
+  "Meta",
+  // Command (Mac), in some browsers also Windows-key
+  "NumLock",
+  "OS",
+  // Windows-key
+  "ScrollLock",
+  "Super",
+  // Virtual keyboard key
+  "Symbol",
+  "SymbolLock"
+];
+const eventTypeMap = {
+  keydown: "keyboard",
+  keyup: "keyboard",
+  mousedown: "mouse",
+  mousemove: "mouse",
+  MSPointerDown: "pointer",
+  MSPointerMove: "pointer",
+  pointerdown: "pointer",
+  pointermove: "pointer",
+  touchstart: "touch",
+  touchend: "touch",
+  wheel: "wheel"
+};
+const navigationalKeys = [
+  "Tab",
+  "Esc",
+  "Escape",
+  " ",
+  "ArrowDown",
+  "Down",
+  "ArrowUp",
+  "Up",
+  "ArrowLeft",
+  "Left",
+  "ArrowRight",
+  "Right",
+  "End",
+  "Home",
+  "PageDown",
+  "PageUp"
+];
+const FocusProvider = ({ children }) => {
+  const [backgroundInertness, setBackgroundInertness] = (0, import_react.useState)(false);
+  const focusContext = (0, import_useFocusContext.useFocusContext)();
+  const [modality, setModality] = (0, import_react.useState)("unknown");
+  const setKeyboardInputModality = (0, import_react.useCallback)((event) => {
+    if (ignoreMap.includes(event.key)) {
+      setModality("pointer");
+      return;
+    }
+    if (!event.target || navigationalKeys.includes(event.key)) {
+      setModality("keyboard");
+    }
+  }, []);
+  const setMouseInputModality = (0, import_react.useCallback)((event) => {
+    switch (eventTypeMap[event.type]) {
+      case "touch":
+      case "pen":
+        return setModality("touch");
+      case "mouse":
+      case "pointer":
+      case "wheel":
+        return setModality("pointer");
+      default:
+        return "unknown";
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    window.addEventListener("pointerdown", setMouseInputModality);
+    window.addEventListener("keydown", setKeyboardInputModality, {
+      capture: true
+    });
+    window.addEventListener("wheel", setMouseInputModality);
+    return () => {
+      window.removeEventListener("pointerdown", setMouseInputModality);
+      window.removeEventListener("keydown", setKeyboardInputModality, {
+        capture: true
+      });
+      window.removeEventListener("wheel", setMouseInputModality);
+    };
+  }, [setKeyboardInputModality, setMouseInputModality]);
+  const focusProps = backgroundInertness ? {
+    inert: "true",
+    tabIndex: -1,
+    "aria-hidden": true
+  } : { inert: void 0, tabIndex: void 0, "aria-hidden": false };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_FocusContext.FocusContext.Provider,
+    {
+      value: {
+        ...(0, import_merge_props.mergeProps)(focusContext, {
+          backgroundInertness,
+          setBackgroundInertness,
+          modality
+        })
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { ...focusProps }, children)
+  );
+};
+FocusProvider["displayName"] = "FocusProvider";

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

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