@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
@@ -1 +1,33 @@
1
- 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};
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 attempt_focus_exports = {};
19
+ __export(attempt_focus_exports, {
20
+ attemptFocus: () => attemptFocus
21
+ });
22
+ module.exports = __toCommonJS(attempt_focus_exports);
23
+ var import_is_focusable = require("./is-focusable.js");
24
+ const attemptFocus = (element) => {
25
+ if (!(0, import_is_focusable.isFocusable)(element)) {
26
+ return false;
27
+ }
28
+ try {
29
+ element.focus({ preventScroll: true });
30
+ } catch (e) {
31
+ }
32
+ return document.activeElement === element;
33
+ };
@@ -1 +1,35 @@
1
- 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};
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 focus_first_descendant_exports = {};
19
+ __export(focus_first_descendant_exports, {
20
+ focusFirstDescendant: () => focusFirstDescendant
21
+ });
22
+ module.exports = __toCommonJS(focus_first_descendant_exports);
23
+ var import_attempt_focus = require("./attempt-focus.js");
24
+ const focusFirstDescendant = (element) => {
25
+ if (!element) {
26
+ return false;
27
+ }
28
+ for (let i = 0; i < element.children.length; i++) {
29
+ const child = element.children[i];
30
+ if ((0, import_attempt_focus.attemptFocus)(child) || focusFirstDescendant(child)) {
31
+ return true;
32
+ }
33
+ }
34
+ return false;
35
+ };
@@ -1 +1,32 @@
1
- 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}
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 get_first_focusable_child_exports = {};
19
+ __export(get_first_focusable_child_exports, {
20
+ getFirstFocusableChild: () => getFirstFocusableChild
21
+ });
22
+ module.exports = __toCommonJS(get_first_focusable_child_exports);
23
+ var import_is_focusable = require("./is-focusable.js");
24
+ function getFirstFocusableChild(container) {
25
+ const treeWalker = document.createTreeWalker(container);
26
+ while (treeWalker.nextNode()) {
27
+ if ((0, import_is_focusable.isFocusable)(treeWalker.currentNode)) {
28
+ return treeWalker.currentNode;
29
+ }
30
+ }
31
+ return null;
32
+ }
@@ -1 +1,35 @@
1
- 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}
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 get_last_focusable_child_exports = {};
19
+ __export(get_last_focusable_child_exports, {
20
+ getLastFocusableChild: () => getLastFocusableChild
21
+ });
22
+ module.exports = __toCommonJS(get_last_focusable_child_exports);
23
+ var import_is_focusable = require("./is-focusable.js");
24
+ function getLastFocusableChild(container) {
25
+ const treeWalker = document.createTreeWalker(container);
26
+ while (treeWalker.lastChild()) {
27
+ treeWalker.lastChild();
28
+ }
29
+ do {
30
+ if ((0, import_is_focusable.isFocusable)(treeWalker.currentNode)) {
31
+ return treeWalker.currentNode;
32
+ }
33
+ } while (treeWalker.previousNode());
34
+ return null;
35
+ }
@@ -1 +1,39 @@
1
- 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}}
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 is_focusable_exports = {};
19
+ __export(is_focusable_exports, {
20
+ isFocusable: () => isFocusable
21
+ });
22
+ module.exports = __toCommonJS(is_focusable_exports);
23
+ function isFocusable(element) {
24
+ if (element.tabIndex < 0 || element.disabled) {
25
+ return false;
26
+ }
27
+ switch (element.nodeName) {
28
+ case "A":
29
+ return !!element.href;
30
+ case "INPUT":
31
+ return element.type !== "hidden";
32
+ case "BUTTON":
33
+ case "SELECT":
34
+ case "TEXTAREA":
35
+ return true;
36
+ default:
37
+ return element.tabIndex >= 0;
38
+ }
39
+ }
@@ -1 +1,25 @@
1
- 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);
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 isBrowser_exports = {};
19
+ __export(isBrowser_exports, {
20
+ isBrowser: () => isBrowser
21
+ });
22
+ module.exports = __toCommonJS(isBrowser_exports);
23
+ const isBrowser = (() => {
24
+ return !!(typeof window !== "undefined" && window.document && window.document.createElement);
25
+ })();
@@ -1 +1,50 @@
1
- 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}
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 merge_props_exports = {};
19
+ __export(merge_props_exports, {
20
+ mergeProps: () => mergeProps
21
+ });
22
+ module.exports = __toCommonJS(merge_props_exports);
23
+ function chain(...callbacks) {
24
+ return (...args) => {
25
+ for (const callback of callbacks) {
26
+ if (typeof callback === "function") {
27
+ callback(...args);
28
+ }
29
+ }
30
+ };
31
+ }
32
+ function mergeProps(...args) {
33
+ const result = { ...args[0] };
34
+ for (let i = 1; i < args.length; i++) {
35
+ const props = args[i];
36
+ for (const key in props) {
37
+ const a = result[key];
38
+ const b = props[key];
39
+ if (typeof a === "function" && typeof b === "function" && // This is a lot faster than a regex.
40
+ key[0] === "o" && key[1] === "n" && key.charCodeAt(2) >= /* 'A' */
41
+ 65 && key.charCodeAt(2) <= /* 'Z' */
42
+ 90) {
43
+ result[key] = chain(a, b);
44
+ } else {
45
+ result[key] = b !== void 0 ? b : a;
46
+ }
47
+ }
48
+ }
49
+ return result;
50
+ }
@@ -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,2 +1,89 @@
1
- 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};
1
+ import { isEmpty } from "lodash-es";
2
+ import React, {
3
+ forwardRef,
4
+ useEffect,
5
+ useLayoutEffect,
6
+ useState
7
+ } from "react";
8
+ import { IntlProvider } from "react-intl";
9
+ import "wicg-inert";
10
+ import { getLanguage, getTimezone } from "@dynatrace-sdk/user-preferences";
11
+ import "./AppRoot.sty.js";
12
+ import { useCurrentTheme } from "../../hooks/useCurrentTheme.js";
13
+ import { FocusProvider } from "../../providers/FocusProvider.js";
14
+ function getBaseHref() {
15
+ const baseElement = document.querySelector("base");
16
+ const href = baseElement?.href ?? "/";
17
+ return href.endsWith("/") ? href : `${href}/`;
18
+ }
19
+ const defaultLanguage = "en";
20
+ const AppRoot = /* @__PURE__ */ forwardRef(
21
+ (props, forwardedRef) => {
22
+ const {
23
+ style: consumerStyle,
24
+ className: consumerClassName,
25
+ "data-testid": dataTestId = "app-root"
26
+ } = props;
27
+ const [messages, setMessages] = useState({});
28
+ const { children } = props;
29
+ const theme = useCurrentTheme();
30
+ const language = getLanguage();
31
+ let timezone = getTimezone();
32
+ try {
33
+ new Intl.DateTimeFormat(language, { timeZone: timezone });
34
+ } catch (error) {
35
+ timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
36
+ }
37
+ useLayoutEffect(() => {
38
+ const link = document.createElement("link");
39
+ link.rel = "stylesheet";
40
+ link.href = "https://dt-cdn.net/fonts/fonts-v004.css";
41
+ document.head.appendChild(link);
42
+ return () => {
43
+ document.head.removeChild(link);
44
+ };
45
+ }, []);
46
+ useLayoutEffect(() => {
47
+ if (document !== void 0) {
48
+ document.documentElement.setAttribute("data-theme", theme);
49
+ }
50
+ }, [theme]);
51
+ useEffect(() => {
52
+ if (language === "en") {
53
+ return;
54
+ }
55
+ fetch(`${getBaseHref()}lang/${language}.json`).then((res) => {
56
+ return res.json();
57
+ }).then((receivedMessages) => {
58
+ setMessages(receivedMessages);
59
+ }).catch(() => {
60
+ setMessages((prev) => isEmpty(prev) ? prev : {});
61
+ });
62
+ }, [language]);
63
+ return /* @__PURE__ */ React.createElement(
64
+ "div",
65
+ {
66
+ ref: forwardedRef,
67
+ "data-testid": dataTestId,
68
+ className: consumerClassName,
69
+ style: consumerStyle,
70
+ "data-theme": theme
71
+ },
72
+ /* @__PURE__ */ React.createElement(
73
+ IntlProvider,
74
+ {
75
+ locale: language,
76
+ timeZone: timezone,
77
+ messages,
78
+ defaultLocale: defaultLanguage
79
+ },
80
+ /* @__PURE__ */ React.createElement(FocusProvider, null, children)
81
+ )
82
+ );
83
+ }
84
+ );
85
+ AppRoot.displayName = "AppRoot";
86
+ export {
87
+ AppRoot
88
+ };
2
89
  //# sourceMappingURL=AppRoot.js.map
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/core/components/app-root/AppRoot.tsx"],
4
4
  "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"],
5
- "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",
6
- "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"]
5
+ "mappings": "AAAA,SAAS,eAAe;AACxB,OAAO;AAAA,EAEL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAA+C;AAExD,OAAO;AACP,SAAS,aAAa,mBAAmB;AAEzC,OAAO;AACP,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAQ9B,SAAS,cAAsB;AAC7B,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,OAAO,aAAa,QAAQ;AAClC,SAAO,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI;AAC5C;AAKA,MAAM,kBAAkB;AAQjB,MAAM,UAA0B;AAAA,EACrC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,eAAe,aAAa;AAAA,IAC9B,IAAI;AAGJ,UAAM,CAAC,UAAU,WAAW,IAAI,SAE9B,CAAC,CAAC;AAEJ,UAAM,EAAE,SAAS,IAAI;AAErB,UAAM,QAAQ,gBAAgB;AAC9B,UAAM,WAAW,YAAY;AAC7B,QAAI,WAAW,YAAY;AAC3B,QAAI;AACF,UAAI,KAAK,eAAe,UAAU,EAAE,UAAU,SAAS,CAAC;AAAA,IAC1D,SAAS,OAAO;AAGd,iBAAW,KAAK,eAAe,EAAE,gBAAgB,EAAE;AAAA,IACrD;AAGA,oBAAgB,MAAM;AAMpB,YAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,WAAK,MAAM;AACX,WAAK,OAAO;AACZ,eAAS,KAAK,YAAY,IAAI;AAC9B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,IAAI;AAAA,MAChC;AAAA,IACF,GAAG,CAAC,CAAC;AAML,oBAAgB,MAAM;AACpB,UAAI,aAAa,QAAW;AAC1B,iBAAS,gBAAgB,aAAa,cAAc,KAAK;AAAA,MAC3D;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,cAAU,MAAM;AACd,UAAI,aAAa,MAAM;AAGrB;AAAA,MACF;AAEA,YAAM,GAAG,YAAY,CAAC,QAAQ,QAAQ,OAAO,EAC1C,KAAK,CAAC,QAAQ;AACb,eAAO,IAAI,KAAK;AAAA,MAClB,CAAC,EACA,KAAK,CAAC,qBAAqB;AAC1B,oBAAY,gBAAgB;AAAA,MAC9B,CAAC,EACA,MAAM,MAAM;AAIX,oBAAY,CAAC,SAAU,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAE;AAAA,MACnD,CAAC;AAAA,IACL,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACP,cAAY;AAAA;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,UAAU;AAAA,UACV;AAAA,UACA,eAAe;AAAA;AAAA,QAEf,oCAAC,qBAAe,QAAS;AAAA,MAC3B;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,QAAqD,cAAc;",
6
+ "names": []
7
7
  }
@@ -1,2 +1,2 @@
1
- import"./AppRoot.css";
1
+ import "./AppRoot.css";
2
2
  //# sourceMappingURL=AppRoot.sty.js.map
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/core/components/app-root/AppRoot.css.ts"],
4
4
  "sourcesContent": ["import './AppRoot.css';"],
5
- "mappings": "AAAA,MAAO",
5
+ "mappings": "AAAA,OAAO;",
6
6
  "names": []
7
7
  }
@@ -1,2 +1,53 @@
1
- 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};
1
+ import React, { useEffect, useRef } from "react";
2
+ import { useActiveElement } from "../../hooks/useActiveElement.js";
3
+ import { useFocusContext } from "../../hooks/useFocusContext.js";
4
+ import { focusFirstDescendant } from "../../utils/focus-management/focus-first-descendant.js";
5
+ const FocusScope = (props) => {
6
+ const { autoFocus, contain, children } = props;
7
+ const focusContext = useFocusContext();
8
+ const wrapperRef = useRef(null);
9
+ const focusedElement = useActiveElement();
10
+ const triggerElement = useRef(focusedElement);
11
+ useEffect(() => {
12
+ if (contain || autoFocus) {
13
+ focusFirstDescendant(wrapperRef.current);
14
+ }
15
+ if (contain) {
16
+ focusContext.setBackgroundInertness(true);
17
+ const triggerElementCopy2 = triggerElement.current;
18
+ return () => {
19
+ focusContext.setBackgroundInertness(false);
20
+ window.setTimeout(() => triggerElementCopy2.focus(), 0);
21
+ };
22
+ }
23
+ if (!autoFocus && !contain) {
24
+ document.addEventListener("keydown", (e) => {
25
+ if (e.key !== "Tab") {
26
+ return;
27
+ }
28
+ if (e.target === triggerElement.current) {
29
+ e.preventDefault();
30
+ focusFirstDescendant(wrapperRef.current);
31
+ }
32
+ });
33
+ }
34
+ const triggerElementCopy = triggerElement.current;
35
+ return () => {
36
+ triggerElementCopy.focus();
37
+ };
38
+ }, [contain, autoFocus]);
39
+ return /* @__PURE__ */ React.createElement(
40
+ "div",
41
+ {
42
+ style: { display: "contents" },
43
+ ref: wrapperRef,
44
+ "aria-labelledby": triggerElement.current.id
45
+ },
46
+ children
47
+ );
48
+ };
49
+ FocusScope.displayName = "FocusScope";
50
+ export {
51
+ FocusScope
52
+ };
2
53
  //# sourceMappingURL=FocusScope.js.map
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/core/components/focus-scope/FocusScope.tsx"],
4
4
  "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"],
5
- "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",
6
- "names": ["React", "useEffect", "useRef", "useActiveElement", "useFocusContext", "focusFirstDescendant", "FocusScope", "props", "autoFocus", "contain", "children", "focusContext", "wrapperRef", "focusedElement", "triggerElement", "triggerElementCopy"]
5
+ "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;",
6
+ "names": ["triggerElementCopy"]
7
7
  }
@@ -1,2 +1,10 @@
1
- import{createContext as o}from"react";const s=o({modality:"unknown",backgroundInertness:void 0,setBackgroundInertness:e=>null});export{s as FocusContext};
1
+ import { createContext } from "react";
2
+ const FocusContext = createContext({
3
+ modality: "unknown",
4
+ backgroundInertness: void 0,
5
+ setBackgroundInertness: (value) => null
6
+ });
7
+ export {
8
+ FocusContext
9
+ };
2
10
  //# sourceMappingURL=FocusContext.js.map
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/core/contexts/FocusContext.tsx"],
4
4
  "sourcesContent": ["import { createContext } from 'react';\n\nimport { Modality } from '../providers/FocusProvider.js';\n\n/**\n * Defines the contents of the FocusContext.\n * @internal\n */\nexport type FocusContextProps = {\n backgroundInertness?: boolean;\n modality: Modality;\n setBackgroundInertness: (value: boolean) => void;\n};\n\n/**\n * @internal\n *\n * This context keeps all information needed for proper focus management.\n * @param modality - currently used pointer device\n * @param backgroundInertness - if the background (behind overlays) is currently inert (inactive)\n * @param setBackgroundInertness - updates the backgrounds active status\n */\nexport const FocusContext = createContext<FocusContextProps>({\n modality: 'unknown',\n backgroundInertness: undefined,\n setBackgroundInertness: (value) => null,\n});\n"],
5
- "mappings": "AAAA,OAAS,iBAAAA,MAAqB,QAsBvB,MAAMC,EAAeD,EAAiC,CAC3D,SAAU,UACV,oBAAqB,OACrB,uBAAyBE,GAAU,IACrC,CAAC",
6
- "names": ["createContext", "FocusContext", "value"]
5
+ "mappings": "AAAA,SAAS,qBAAqB;AAsBvB,MAAM,eAAe,cAAiC;AAAA,EAC3D,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,wBAAwB,CAAC,UAAU;AACrC,CAAC;",
6
+ "names": []
7
7
  }
@@ -1,2 +1,18 @@
1
- import{useState as c,useEffect as o}from"react";const u=()=>{const[t,n]=c(document.activeElement),e=s=>{n(document.activeElement)};return o(()=>(document.addEventListener("focusin",e),()=>{document.removeEventListener("focusin",e)}),[]),t};export{u as useActiveElement};
1
+ import { useState, useEffect } from "react";
2
+ const useActiveElement = () => {
3
+ const [active, setActive] = useState(document.activeElement);
4
+ const handleFocusIn = (e) => {
5
+ setActive(document.activeElement);
6
+ };
7
+ useEffect(() => {
8
+ document.addEventListener("focusin", handleFocusIn);
9
+ return () => {
10
+ document.removeEventListener("focusin", handleFocusIn);
11
+ };
12
+ }, []);
13
+ return active;
14
+ };
15
+ export {
16
+ useActiveElement
17
+ };
2
18
  //# sourceMappingURL=useActiveElement.js.map
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/core/hooks/useActiveElement.ts"],
4
4
  "sourcesContent": ["import { useState, useEffect } from 'react';\n\n/**\n * @internal\n * Hook used for getting the active element.\n * @returns the currently focused element.\n */\nexport const useActiveElement = (): HTMLElement => {\n const [active, setActive] = useState(document.activeElement as HTMLElement);\n\n const handleFocusIn = (e: FocusEvent) => {\n setActive(document.activeElement as HTMLElement);\n };\n\n useEffect(() => {\n document.addEventListener('focusin', handleFocusIn);\n return () => {\n document.removeEventListener('focusin', handleFocusIn);\n };\n }, []);\n\n return active;\n};\n"],
5
- "mappings": "AAAA,OAAS,YAAAA,EAAU,aAAAC,MAAiB,QAO7B,MAAMC,EAAmB,IAAmB,CACjD,KAAM,CAACC,EAAQC,CAAS,EAAIJ,EAAS,SAAS,aAA4B,EAEpEK,EAAiBC,GAAkB,CACvCF,EAAU,SAAS,aAA4B,CACjD,EAEA,OAAAH,EAAU,KACR,SAAS,iBAAiB,UAAWI,CAAa,EAC3C,IAAM,CACX,SAAS,oBAAoB,UAAWA,CAAa,CACvD,GACC,CAAC,CAAC,EAEEF,CACT",
6
- "names": ["useState", "useEffect", "useActiveElement", "active", "setActive", "handleFocusIn", "e"]
5
+ "mappings": "AAAA,SAAS,UAAU,iBAAiB;AAO7B,MAAM,mBAAmB,MAAmB;AACjD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,SAAS,aAA4B;AAE1E,QAAM,gBAAgB,CAAC,MAAkB;AACvC,cAAU,SAAS,aAA4B;AAAA,EACjD;AAEA,YAAU,MAAM;AACd,aAAS,iBAAiB,WAAW,aAAa;AAClD,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,aAAa;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;",
6
+ "names": []
7
7
  }
@@ -1,2 +1,36 @@
1
- import{useEffect as m,useMemo as n,useState as i}from"react";import{getTheme as a}from"@dynatrace-sdk/user-preferences";import{isBrowser as c}from"../utils/isBrowser.js";function g(){const r=n(()=>a(),[]);if(r==="dark"||r==="light")return r;if(!c)return"light";const e=n(()=>window&&window.matchMedia("(prefers-color-scheme: dark)"),[]),[o,h]=i(e.matches?"dark":"light");return m(()=>{const t=()=>{const s=e.matches;h(s?"dark":"light")};return e.addEventListener("change",t),()=>{e.removeEventListener("change",t)}},[e]),o}export{g as useCurrentTheme};
1
+ import { useEffect, useMemo, useState } from "react";
2
+ import { getTheme } from "@dynatrace-sdk/user-preferences";
3
+ import { isBrowser } from "../utils/isBrowser.js";
4
+ function useCurrentTheme() {
5
+ const sdkTheme = useMemo(() => {
6
+ return getTheme();
7
+ }, []);
8
+ if (sdkTheme === "dark" || sdkTheme === "light") {
9
+ return sdkTheme;
10
+ }
11
+ if (!isBrowser) {
12
+ return "light";
13
+ }
14
+ const themeQuery = useMemo(
15
+ () => window && window.matchMedia("(prefers-color-scheme: dark)"),
16
+ []
17
+ );
18
+ const [currentTheme, setCurrentTheme] = useState(
19
+ themeQuery.matches ? "dark" : "light"
20
+ );
21
+ useEffect(() => {
22
+ const handlePrefersColorSchemeChange = () => {
23
+ const prefersDark = themeQuery.matches;
24
+ setCurrentTheme(prefersDark ? "dark" : "light");
25
+ };
26
+ themeQuery.addEventListener("change", handlePrefersColorSchemeChange);
27
+ return () => {
28
+ themeQuery.removeEventListener("change", handlePrefersColorSchemeChange);
29
+ };
30
+ }, [themeQuery]);
31
+ return currentTheme;
32
+ }
33
+ export {
34
+ useCurrentTheme
35
+ };
2
36
  //# sourceMappingURL=useCurrentTheme.js.map
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/core/hooks/useCurrentTheme.tsx"],
4
4
  "sourcesContent": ["import { useEffect, useMemo, useState } from 'react';\n\nimport { getTheme } from '@dynatrace-sdk/user-preferences';\n\nimport { isBrowser } from '../utils/isBrowser.js';\n\n/** Returns the current theme based on sdk-setting or browsers preferred color-scheme */\nexport function useCurrentTheme(): 'light' | 'dark' {\n const sdkTheme = useMemo(() => {\n return getTheme();\n }, []);\n\n if (sdkTheme === 'dark' || sdkTheme === 'light') {\n return sdkTheme;\n }\n\n if (!isBrowser) {\n return 'light';\n }\n\n // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n // change through the applications' lifecycle.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const themeQuery = useMemo(\n () => window && window.matchMedia('(prefers-color-scheme: dark)'),\n [],\n );\n\n // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n // change through the applications' lifecycle.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [currentTheme, setCurrentTheme] = useState<'light' | 'dark'>(\n themeQuery.matches ? 'dark' : 'light',\n );\n\n // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n // change through the applications' lifecycle.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n const handlePrefersColorSchemeChange = () => {\n const prefersDark = themeQuery.matches;\n setCurrentTheme(prefersDark ? 'dark' : 'light');\n };\n\n themeQuery.addEventListener('change', handlePrefersColorSchemeChange);\n return () => {\n themeQuery.removeEventListener('change', handlePrefersColorSchemeChange);\n };\n }, [themeQuery]);\n\n return currentTheme;\n}\n"],
5
- "mappings": "AAAA,OAAS,aAAAA,EAAW,WAAAC,EAAS,YAAAC,MAAgB,QAE7C,OAAS,YAAAC,MAAgB,kCAEzB,OAAS,aAAAC,MAAiB,wBAGnB,SAASC,GAAoC,CAClD,MAAMC,EAAWL,EAAQ,IAChBE,EAAS,EACf,CAAC,CAAC,EAEL,GAAIG,IAAa,QAAUA,IAAa,QACtC,OAAOA,EAGT,GAAI,CAACF,EACH,MAAO,QAMT,MAAMG,EAAaN,EACjB,IAAM,QAAU,OAAO,WAAW,8BAA8B,EAChE,CAAC,CACH,EAKM,CAACO,EAAcC,CAAe,EAAIP,EACtCK,EAAW,QAAU,OAAS,OAChC,EAKA,OAAAP,EAAU,IAAM,CACd,MAAMU,EAAiC,IAAM,CAC3C,MAAMC,EAAcJ,EAAW,QAC/BE,EAAgBE,EAAc,OAAS,OAAO,CAChD,EAEA,OAAAJ,EAAW,iBAAiB,SAAUG,CAA8B,EAC7D,IAAM,CACXH,EAAW,oBAAoB,SAAUG,CAA8B,CACzE,CACF,EAAG,CAACH,CAAU,CAAC,EAERC,CACT",
6
- "names": ["useEffect", "useMemo", "useState", "getTheme", "isBrowser", "useCurrentTheme", "sdkTheme", "themeQuery", "currentTheme", "setCurrentTheme", "handlePrefersColorSchemeChange", "prefersDark"]
5
+ "mappings": "AAAA,SAAS,WAAW,SAAS,gBAAgB;AAE7C,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAGnB,SAAS,kBAAoC;AAClD,QAAM,WAAW,QAAQ,MAAM;AAC7B,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,MAAI,aAAa,UAAU,aAAa,SAAS;AAC/C,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAKA,QAAM,aAAa;AAAA,IACjB,MAAM,UAAU,OAAO,WAAW,8BAA8B;AAAA,IAChE,CAAC;AAAA,EACH;AAKA,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC,WAAW,UAAU,SAAS;AAAA,EAChC;AAKA,YAAU,MAAM;AACd,UAAM,iCAAiC,MAAM;AAC3C,YAAM,cAAc,WAAW;AAC/B,sBAAgB,cAAc,SAAS,OAAO;AAAA,IAChD;AAEA,eAAW,iBAAiB,UAAU,8BAA8B;AACpE,WAAO,MAAM;AACX,iBAAW,oBAAoB,UAAU,8BAA8B;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AACT;",
6
+ "names": []
7
7
  }
@@ -1,2 +1,11 @@
1
- import{useContext as o}from"react";import{FocusContext as t}from"../contexts/FocusContext.js";const s=()=>o(t);export{s as useFocusContext};
1
+ import { useContext } from "react";
2
+ import {
3
+ FocusContext
4
+ } from "../contexts/FocusContext.js";
5
+ const useFocusContext = () => {
6
+ return useContext(FocusContext);
7
+ };
8
+ export {
9
+ useFocusContext
10
+ };
2
11
  //# sourceMappingURL=useFocusContext.js.map