@dynatrace/strato-components 0.84.12 → 0.84.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/core/components/app-root/AppRoot.css +1 -0
  2. package/core/components/app-root/AppRoot.js +112 -1
  3. package/core/components/app-root/AppRoot.sty.js +1 -1
  4. package/core/components/focus-scope/FocusScope.js +81 -1
  5. package/core/contexts/FocusContext.js +28 -1
  6. package/core/hooks/useActiveElement.js +36 -1
  7. package/core/hooks/useCurrentTheme.js +54 -1
  8. package/core/hooks/useFocusContext.js +27 -1
  9. package/core/index.js +45 -1
  10. package/core/providers/FocusProvider.js +146 -1
  11. package/core/types/data-props.js +15 -1
  12. package/core/types/styling-props.js +15 -1
  13. package/core/types/with-children.js +15 -1
  14. package/core/utils/focus-management/attempt-focus.js +33 -1
  15. package/core/utils/focus-management/focus-first-descendant.js +35 -1
  16. package/core/utils/focus-management/get-first-focusable-child.js +32 -1
  17. package/core/utils/focus-management/get-last-focusable-child.js +35 -1
  18. package/core/utils/focus-management/is-focusable.js +39 -1
  19. package/core/utils/isBrowser.js +25 -1
  20. package/core/utils/merge-props.js +50 -1
  21. package/esm/core/components/app-root/AppRoot.css +1 -0
  22. package/esm/core/components/app-root/AppRoot.js +88 -1
  23. package/esm/core/components/app-root/AppRoot.js.map +2 -2
  24. package/esm/core/components/app-root/AppRoot.sty.js +1 -1
  25. package/esm/core/components/app-root/AppRoot.sty.js.map +1 -1
  26. package/esm/core/components/focus-scope/FocusScope.js +52 -1
  27. package/esm/core/components/focus-scope/FocusScope.js.map +2 -2
  28. package/esm/core/contexts/FocusContext.js +9 -1
  29. package/esm/core/contexts/FocusContext.js.map +2 -2
  30. package/esm/core/hooks/useActiveElement.js +17 -1
  31. package/esm/core/hooks/useActiveElement.js.map +2 -2
  32. package/esm/core/hooks/useCurrentTheme.js +35 -1
  33. package/esm/core/hooks/useCurrentTheme.js.map +2 -2
  34. package/esm/core/hooks/useFocusContext.js +10 -1
  35. package/esm/core/hooks/useFocusContext.js.map +2 -2
  36. package/esm/core/index.js +32 -1
  37. package/esm/core/index.js.map +2 -2
  38. package/esm/core/providers/FocusProvider.js +117 -1
  39. package/esm/core/providers/FocusProvider.js.map +2 -2
  40. package/esm/core/utils/focus-management/attempt-focus.js +14 -1
  41. package/esm/core/utils/focus-management/attempt-focus.js.map +2 -2
  42. package/esm/core/utils/focus-management/focus-first-descendant.js +16 -1
  43. package/esm/core/utils/focus-management/focus-first-descendant.js.map +2 -2
  44. package/esm/core/utils/focus-management/get-first-focusable-child.js +13 -1
  45. package/esm/core/utils/focus-management/get-first-focusable-child.js.map +2 -2
  46. package/esm/core/utils/focus-management/get-last-focusable-child.js +16 -1
  47. package/esm/core/utils/focus-management/get-last-focusable-child.js.map +2 -2
  48. package/esm/core/utils/focus-management/is-focusable.js +20 -1
  49. package/esm/core/utils/focus-management/is-focusable.js.map +2 -2
  50. package/esm/core/utils/isBrowser.js +6 -1
  51. package/esm/core/utils/isBrowser.js.map +2 -2
  52. package/esm/core/utils/merge-props.js +31 -1
  53. package/esm/core/utils/merge-props.js.map +2 -2
  54. package/esm/index.js +1 -1
  55. package/esm/index.js.map +1 -1
  56. package/index.js +17 -1
  57. package/package.json +1 -1
  58. package/testing/custom-render.js +62 -1
  59. package/testing/index.js +91 -1
  60. package/testing/mocks/bounding-client-rect-mock.js +36 -1
  61. package/testing/mocks/canvas-mock.js +187 -1
  62. package/testing/mocks/create-mock-element.js +99 -1
  63. package/testing/mocks/create-range-mock.js +47 -1
  64. package/testing/mocks/dom-rect-mock.js +56 -1
  65. package/testing/mocks/fetch-mock.js +38 -1
  66. package/testing/mocks/intersection-observer-mock.js +58 -1
  67. package/testing/mocks/match-media-mock.js +45 -1
  68. package/testing/mocks/offset-height-mock.js +39 -1
  69. package/testing/mocks/offset-width-mock.js +39 -1
  70. package/testing/mocks/pointer-event-mock.js +42 -1
  71. package/testing/mocks/resize-observer-mock.js +42 -1
  72. package/testing/mocks/screen-size-mock.js +34 -1
  73. package/testing/mocks/scroll-into-view-mock.js +34 -1
  74. package/testing/mocks/scroll-width-mock.js +39 -1
  75. package/testing/mocks/select-mock.js +45 -1
  76. package/testing/mocks/table-virtualization-mock.js +47 -1
  77. package/testing/mocks/text-ellipsis-mock.js +38 -1
  78. package/testing/setup.js +57 -1
@@ -1700,6 +1700,7 @@ html, body {
1700
1700
  }
1701
1701
  body {
1702
1702
  font-size: var(--dt-typography-text-base-default-size, 14px);
1703
+ line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
1703
1704
  }
1704
1705
  *::-webkit-scrollbar {
1705
1706
  width: 16px;
@@ -1 +1,112 @@
1
- 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";
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+ var AppRoot_exports = {};
29
+ __export(AppRoot_exports, {
30
+ AppRoot: () => AppRoot
31
+ });
32
+ module.exports = __toCommonJS(AppRoot_exports);
33
+ var import_lodash_es = require("lodash");
34
+ var import_react = __toESM(require("react"));
35
+ var import_react_intl = require("react-intl");
36
+ var import_wicg_inert = require("wicg-inert");
37
+ var import_user_preferences = require("@dynatrace-sdk/user-preferences");
38
+ var import_AppRoot_css = require("./AppRoot.sty.js");
39
+ var import_useCurrentTheme = require("../../hooks/useCurrentTheme.js");
40
+ var import_FocusProvider = require("../../providers/FocusProvider.js");
41
+ function getBaseHref() {
42
+ const baseElement = document.querySelector("base");
43
+ const href = baseElement?.href ?? "/";
44
+ return href.endsWith("/") ? href : `${href}/`;
45
+ }
46
+ const defaultLanguage = "en";
47
+ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
48
+ (props, forwardedRef) => {
49
+ const {
50
+ style: consumerStyle,
51
+ className: consumerClassName,
52
+ "data-testid": dataTestId = "app-root"
53
+ } = props;
54
+ const [messages, setMessages] = (0, import_react.useState)({});
55
+ const { children } = props;
56
+ const theme = (0, import_useCurrentTheme.useCurrentTheme)();
57
+ const language = (0, import_user_preferences.getLanguage)();
58
+ let timezone = (0, import_user_preferences.getTimezone)();
59
+ try {
60
+ new Intl.DateTimeFormat(language, { timeZone: timezone });
61
+ } catch (error) {
62
+ timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
63
+ }
64
+ (0, import_react.useLayoutEffect)(() => {
65
+ const link = document.createElement("link");
66
+ link.rel = "stylesheet";
67
+ link.href = "https://dt-cdn.net/fonts/fonts-v004.css";
68
+ document.head.appendChild(link);
69
+ return () => {
70
+ document.head.removeChild(link);
71
+ };
72
+ }, []);
73
+ (0, import_react.useLayoutEffect)(() => {
74
+ if (document !== void 0) {
75
+ document.documentElement.setAttribute("data-theme", theme);
76
+ }
77
+ }, [theme]);
78
+ (0, import_react.useEffect)(() => {
79
+ if (language === "en") {
80
+ return;
81
+ }
82
+ fetch(`${getBaseHref()}lang/${language}.json`).then((res) => {
83
+ return res.json();
84
+ }).then((receivedMessages) => {
85
+ setMessages(receivedMessages);
86
+ }).catch(() => {
87
+ setMessages((prev) => (0, import_lodash_es.isEmpty)(prev) ? prev : {});
88
+ });
89
+ }, [language]);
90
+ return /* @__PURE__ */ import_react.default.createElement(
91
+ "div",
92
+ {
93
+ ref: forwardedRef,
94
+ "data-testid": dataTestId,
95
+ className: consumerClassName,
96
+ style: consumerStyle,
97
+ "data-theme": theme
98
+ },
99
+ /* @__PURE__ */ import_react.default.createElement(
100
+ import_react_intl.IntlProvider,
101
+ {
102
+ locale: language,
103
+ timeZone: timezone,
104
+ messages,
105
+ defaultLocale: defaultLanguage
106
+ },
107
+ /* @__PURE__ */ import_react.default.createElement(import_FocusProvider.FocusProvider, null, children)
108
+ )
109
+ );
110
+ }
111
+ );
112
+ AppRoot.displayName = "AppRoot";
@@ -1 +1 @@
1
- var i=require("./AppRoot.css");
1
+ var import_AppRoot_css_ts_vanilla = require("./AppRoot.css");
@@ -1 +1,81 @@
1
- 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";
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+ var FocusScope_exports = {};
29
+ __export(FocusScope_exports, {
30
+ FocusScope: () => FocusScope
31
+ });
32
+ module.exports = __toCommonJS(FocusScope_exports);
33
+ var import_react = __toESM(require("react"));
34
+ var import_useActiveElement = require("../../hooks/useActiveElement.js");
35
+ var import_useFocusContext = require("../../hooks/useFocusContext.js");
36
+ var import_focus_first_descendant = require("../../utils/focus-management/focus-first-descendant.js");
37
+ const FocusScope = (props) => {
38
+ const { autoFocus, contain, children } = props;
39
+ const focusContext = (0, import_useFocusContext.useFocusContext)();
40
+ const wrapperRef = (0, import_react.useRef)(null);
41
+ const focusedElement = (0, import_useActiveElement.useActiveElement)();
42
+ const triggerElement = (0, import_react.useRef)(focusedElement);
43
+ (0, import_react.useEffect)(() => {
44
+ if (contain || autoFocus) {
45
+ (0, import_focus_first_descendant.focusFirstDescendant)(wrapperRef.current);
46
+ }
47
+ if (contain) {
48
+ focusContext.setBackgroundInertness(true);
49
+ const triggerElementCopy2 = triggerElement.current;
50
+ return () => {
51
+ focusContext.setBackgroundInertness(false);
52
+ window.setTimeout(() => triggerElementCopy2.focus(), 0);
53
+ };
54
+ }
55
+ if (!autoFocus && !contain) {
56
+ document.addEventListener("keydown", (e) => {
57
+ if (e.key !== "Tab") {
58
+ return;
59
+ }
60
+ if (e.target === triggerElement.current) {
61
+ e.preventDefault();
62
+ (0, import_focus_first_descendant.focusFirstDescendant)(wrapperRef.current);
63
+ }
64
+ });
65
+ }
66
+ const triggerElementCopy = triggerElement.current;
67
+ return () => {
68
+ triggerElementCopy.focus();
69
+ };
70
+ }, [contain, autoFocus]);
71
+ return /* @__PURE__ */ import_react.default.createElement(
72
+ "div",
73
+ {
74
+ style: { display: "contents" },
75
+ ref: wrapperRef,
76
+ "aria-labelledby": triggerElement.current.id
77
+ },
78
+ children
79
+ );
80
+ };
81
+ FocusScope.displayName = "FocusScope";
@@ -1 +1,28 @@
1
- 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});
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+ var FocusContext_exports = {};
19
+ __export(FocusContext_exports, {
20
+ FocusContext: () => FocusContext
21
+ });
22
+ module.exports = __toCommonJS(FocusContext_exports);
23
+ var import_react = require("react");
24
+ const FocusContext = (0, import_react.createContext)({
25
+ modality: "unknown",
26
+ backgroundInertness: void 0,
27
+ setBackgroundInertness: (value) => null
28
+ });
@@ -1 +1,36 @@
1
- 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};
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+ var useActiveElement_exports = {};
19
+ __export(useActiveElement_exports, {
20
+ useActiveElement: () => useActiveElement
21
+ });
22
+ module.exports = __toCommonJS(useActiveElement_exports);
23
+ var import_react = require("react");
24
+ const useActiveElement = () => {
25
+ const [active, setActive] = (0, import_react.useState)(document.activeElement);
26
+ const handleFocusIn = (e) => {
27
+ setActive(document.activeElement);
28
+ };
29
+ (0, import_react.useEffect)(() => {
30
+ document.addEventListener("focusin", handleFocusIn);
31
+ return () => {
32
+ document.removeEventListener("focusin", handleFocusIn);
33
+ };
34
+ }, []);
35
+ return active;
36
+ };
@@ -1 +1,54 @@
1
- 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}
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+ var useCurrentTheme_exports = {};
19
+ __export(useCurrentTheme_exports, {
20
+ useCurrentTheme: () => useCurrentTheme
21
+ });
22
+ module.exports = __toCommonJS(useCurrentTheme_exports);
23
+ var import_react = require("react");
24
+ var import_user_preferences = require("@dynatrace-sdk/user-preferences");
25
+ var import_isBrowser = require("../utils/isBrowser.js");
26
+ function useCurrentTheme() {
27
+ const sdkTheme = (0, import_react.useMemo)(() => {
28
+ return (0, import_user_preferences.getTheme)();
29
+ }, []);
30
+ if (sdkTheme === "dark" || sdkTheme === "light") {
31
+ return sdkTheme;
32
+ }
33
+ if (!import_isBrowser.isBrowser) {
34
+ return "light";
35
+ }
36
+ const themeQuery = (0, import_react.useMemo)(
37
+ () => window && window.matchMedia("(prefers-color-scheme: dark)"),
38
+ []
39
+ );
40
+ const [currentTheme, setCurrentTheme] = (0, import_react.useState)(
41
+ themeQuery.matches ? "dark" : "light"
42
+ );
43
+ (0, import_react.useEffect)(() => {
44
+ const handlePrefersColorSchemeChange = () => {
45
+ const prefersDark = themeQuery.matches;
46
+ setCurrentTheme(prefersDark ? "dark" : "light");
47
+ };
48
+ themeQuery.addEventListener("change", handlePrefersColorSchemeChange);
49
+ return () => {
50
+ themeQuery.removeEventListener("change", handlePrefersColorSchemeChange);
51
+ };
52
+ }, [themeQuery]);
53
+ return currentTheme;
54
+ }
@@ -1 +1,27 @@
1
- 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);
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+ var useFocusContext_exports = {};
19
+ __export(useFocusContext_exports, {
20
+ useFocusContext: () => useFocusContext
21
+ });
22
+ module.exports = __toCommonJS(useFocusContext_exports);
23
+ var import_react = require("react");
24
+ var import_FocusContext = require("../contexts/FocusContext.js");
25
+ const useFocusContext = () => {
26
+ return (0, import_react.useContext)(import_FocusContext.FocusContext);
27
+ };
package/core/index.js CHANGED
@@ -1 +1,45 @@
1
- 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");
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+ var core_exports = {};
19
+ __export(core_exports, {
20
+ AppRoot: () => import_AppRoot.AppRoot,
21
+ _FocusProvider: () => import_FocusProvider.FocusProvider,
22
+ _FocusScope: () => import_FocusScope.FocusScope,
23
+ _attemptFocus: () => import_attempt_focus.attemptFocus,
24
+ _focusFirstDescendant: () => import_focus_first_descendant.focusFirstDescendant,
25
+ _getFirstFocusableChild: () => import_get_first_focusable_child.getFirstFocusableChild,
26
+ _getLastFocusableChild: () => import_get_last_focusable_child.getLastFocusableChild,
27
+ _isBrowser: () => import_isBrowser.isBrowser,
28
+ _isFocusable: () => import_is_focusable.isFocusable,
29
+ _mergeProps: () => import_merge_props.mergeProps,
30
+ _useFocusContext: () => import_useFocusContext.useFocusContext,
31
+ useCurrentTheme: () => import_useCurrentTheme.useCurrentTheme
32
+ });
33
+ module.exports = __toCommonJS(core_exports);
34
+ var import_AppRoot = require("./components/app-root/AppRoot.js");
35
+ var import_FocusScope = require("./components/focus-scope/FocusScope.js");
36
+ var import_useCurrentTheme = require("./hooks/useCurrentTheme.js");
37
+ var import_useFocusContext = require("./hooks/useFocusContext.js");
38
+ var import_FocusProvider = require("./providers/FocusProvider.js");
39
+ var import_attempt_focus = require("./utils/focus-management/attempt-focus.js");
40
+ var import_focus_first_descendant = require("./utils/focus-management/focus-first-descendant.js");
41
+ var import_get_first_focusable_child = require("./utils/focus-management/get-first-focusable-child.js");
42
+ var import_get_last_focusable_child = require("./utils/focus-management/get-last-focusable-child.js");
43
+ var import_is_focusable = require("./utils/focus-management/is-focusable.js");
44
+ var import_isBrowser = require("./utils/isBrowser.js");
45
+ var import_merge_props = require("./utils/merge-props.js");
@@ -1 +1,146 @@
1
- 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";
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+ var FocusProvider_exports = {};
29
+ __export(FocusProvider_exports, {
30
+ FocusProvider: () => FocusProvider
31
+ });
32
+ module.exports = __toCommonJS(FocusProvider_exports);
33
+ var import_react = __toESM(require("react"));
34
+ var import_FocusContext = require("../contexts/FocusContext.js");
35
+ var import_useFocusContext = require("../hooks/useFocusContext.js");
36
+ var import_merge_props = require("../utils/merge-props.js");
37
+ const ignoreMap = [
38
+ "Alt",
39
+ "AltGraph",
40
+ "CapsLock",
41
+ "Control",
42
+ "Fn",
43
+ "FnLock",
44
+ "Hyper",
45
+ "Meta",
46
+ // Command (Mac), in some browsers also Windows-key
47
+ "NumLock",
48
+ "OS",
49
+ // Windows-key
50
+ "ScrollLock",
51
+ "Super",
52
+ // Virtual keyboard key
53
+ "Symbol",
54
+ "SymbolLock"
55
+ ];
56
+ const eventTypeMap = {
57
+ keydown: "keyboard",
58
+ keyup: "keyboard",
59
+ mousedown: "mouse",
60
+ mousemove: "mouse",
61
+ MSPointerDown: "pointer",
62
+ MSPointerMove: "pointer",
63
+ pointerdown: "pointer",
64
+ pointermove: "pointer",
65
+ touchstart: "touch",
66
+ touchend: "touch",
67
+ wheel: "wheel"
68
+ };
69
+ const navigationalKeys = [
70
+ "Tab",
71
+ "Esc",
72
+ "Escape",
73
+ " ",
74
+ "ArrowDown",
75
+ "Down",
76
+ "ArrowUp",
77
+ "Up",
78
+ "ArrowLeft",
79
+ "Left",
80
+ "ArrowRight",
81
+ "Right",
82
+ "End",
83
+ "Home",
84
+ "PageDown",
85
+ "PageUp"
86
+ ];
87
+ const FocusProvider = ({ children }) => {
88
+ const [backgroundInertness, setBackgroundInertness] = (0, import_react.useState)(false);
89
+ const focusContext = (0, import_useFocusContext.useFocusContext)();
90
+ const [modality, setModality] = (0, import_react.useState)("unknown");
91
+ const setKeyboardInputModality = (0, import_react.useCallback)((event) => {
92
+ if (ignoreMap.includes(event.key)) {
93
+ setModality("pointer");
94
+ return;
95
+ }
96
+ if (!event.target || navigationalKeys.includes(event.key)) {
97
+ setModality("keyboard");
98
+ }
99
+ }, []);
100
+ const setMouseInputModality = (0, import_react.useCallback)((event) => {
101
+ switch (eventTypeMap[event.type]) {
102
+ case "touch":
103
+ case "pen":
104
+ return setModality("touch");
105
+ case "mouse":
106
+ case "pointer":
107
+ case "wheel":
108
+ return setModality("pointer");
109
+ default:
110
+ return "unknown";
111
+ }
112
+ }, []);
113
+ (0, import_react.useEffect)(() => {
114
+ window.addEventListener("pointerdown", setMouseInputModality);
115
+ window.addEventListener("keydown", setKeyboardInputModality, {
116
+ capture: true
117
+ });
118
+ window.addEventListener("wheel", setMouseInputModality);
119
+ return () => {
120
+ window.removeEventListener("pointerdown", setMouseInputModality);
121
+ window.removeEventListener("keydown", setKeyboardInputModality, {
122
+ capture: true
123
+ });
124
+ window.removeEventListener("wheel", setMouseInputModality);
125
+ };
126
+ }, [setKeyboardInputModality, setMouseInputModality]);
127
+ const focusProps = backgroundInertness ? {
128
+ inert: "true",
129
+ tabIndex: -1,
130
+ "aria-hidden": true
131
+ } : { inert: void 0, tabIndex: void 0, "aria-hidden": false };
132
+ return /* @__PURE__ */ import_react.default.createElement(
133
+ import_FocusContext.FocusContext.Provider,
134
+ {
135
+ value: {
136
+ ...(0, import_merge_props.mergeProps)(focusContext, {
137
+ backgroundInertness,
138
+ setBackgroundInertness,
139
+ modality
140
+ })
141
+ }
142
+ },
143
+ /* @__PURE__ */ import_react.default.createElement("div", { ...focusProps }, children)
144
+ );
145
+ };
146
+ FocusProvider["displayName"] = "FocusProvider";
@@ -1 +1,15 @@
1
- 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);
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __copyProps = (to, from, except, desc) => {
6
+ if (from && typeof from === "object" || typeof from === "function") {
7
+ for (let key of __getOwnPropNames(from))
8
+ if (!__hasOwnProp.call(to, key) && key !== except)
9
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
10
+ }
11
+ return to;
12
+ };
13
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
14
+ var data_props_exports = {};
15
+ module.exports = __toCommonJS(data_props_exports);
@@ -1 +1,15 @@
1
- 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);
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __copyProps = (to, from, except, desc) => {
6
+ if (from && typeof from === "object" || typeof from === "function") {
7
+ for (let key of __getOwnPropNames(from))
8
+ if (!__hasOwnProp.call(to, key) && key !== except)
9
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
10
+ }
11
+ return to;
12
+ };
13
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
14
+ var styling_props_exports = {};
15
+ module.exports = __toCommonJS(styling_props_exports);
@@ -1 +1,15 @@
1
- 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);
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __copyProps = (to, from, except, desc) => {
6
+ if (from && typeof from === "object" || typeof from === "function") {
7
+ for (let key of __getOwnPropNames(from))
8
+ if (!__hasOwnProp.call(to, key) && key !== except)
9
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
10
+ }
11
+ return to;
12
+ };
13
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
14
+ var with_children_exports = {};
15
+ module.exports = __toCommonJS(with_children_exports);