@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.
- package/core/components/app-root/AppRoot.css +1 -0
- package/core/components/app-root/AppRoot.js +112 -1
- package/core/components/app-root/AppRoot.sty.js +1 -1
- package/core/components/focus-scope/FocusScope.js +81 -1
- package/core/contexts/FocusContext.js +28 -1
- package/core/hooks/useActiveElement.js +36 -1
- package/core/hooks/useCurrentTheme.js +54 -1
- package/core/hooks/useFocusContext.js +27 -1
- package/core/index.js +45 -1
- package/core/providers/FocusProvider.js +146 -1
- package/core/types/data-props.js +15 -1
- package/core/types/styling-props.js +15 -1
- package/core/types/with-children.js +15 -1
- package/core/utils/focus-management/attempt-focus.js +33 -1
- package/core/utils/focus-management/focus-first-descendant.js +35 -1
- package/core/utils/focus-management/get-first-focusable-child.js +32 -1
- package/core/utils/focus-management/get-last-focusable-child.js +35 -1
- package/core/utils/focus-management/is-focusable.js +39 -1
- package/core/utils/isBrowser.js +25 -1
- package/core/utils/merge-props.js +50 -1
- package/esm/core/components/app-root/AppRoot.css +1 -0
- package/esm/core/components/app-root/AppRoot.js +88 -1
- package/esm/core/components/app-root/AppRoot.js.map +2 -2
- package/esm/core/components/app-root/AppRoot.sty.js +1 -1
- package/esm/core/components/app-root/AppRoot.sty.js.map +1 -1
- package/esm/core/components/focus-scope/FocusScope.js +52 -1
- package/esm/core/components/focus-scope/FocusScope.js.map +2 -2
- package/esm/core/contexts/FocusContext.js +9 -1
- package/esm/core/contexts/FocusContext.js.map +2 -2
- package/esm/core/hooks/useActiveElement.js +17 -1
- package/esm/core/hooks/useActiveElement.js.map +2 -2
- package/esm/core/hooks/useCurrentTheme.js +35 -1
- package/esm/core/hooks/useCurrentTheme.js.map +2 -2
- package/esm/core/hooks/useFocusContext.js +10 -1
- package/esm/core/hooks/useFocusContext.js.map +2 -2
- package/esm/core/index.js +32 -1
- package/esm/core/index.js.map +2 -2
- package/esm/core/providers/FocusProvider.js +117 -1
- package/esm/core/providers/FocusProvider.js.map +2 -2
- package/esm/core/utils/focus-management/attempt-focus.js +14 -1
- package/esm/core/utils/focus-management/attempt-focus.js.map +2 -2
- package/esm/core/utils/focus-management/focus-first-descendant.js +16 -1
- package/esm/core/utils/focus-management/focus-first-descendant.js.map +2 -2
- package/esm/core/utils/focus-management/get-first-focusable-child.js +13 -1
- package/esm/core/utils/focus-management/get-first-focusable-child.js.map +2 -2
- package/esm/core/utils/focus-management/get-last-focusable-child.js +16 -1
- package/esm/core/utils/focus-management/get-last-focusable-child.js.map +2 -2
- package/esm/core/utils/focus-management/is-focusable.js +20 -1
- package/esm/core/utils/focus-management/is-focusable.js.map +2 -2
- package/esm/core/utils/isBrowser.js +6 -1
- package/esm/core/utils/isBrowser.js.map +2 -2
- package/esm/core/utils/merge-props.js +31 -1
- package/esm/core/utils/merge-props.js.map +2 -2
- package/esm/index.js +1 -1
- package/esm/index.js.map +1 -1
- package/index.js +17 -1
- package/package.json +1 -1
- package/testing/custom-render.js +62 -1
- package/testing/index.js +91 -1
- package/testing/mocks/bounding-client-rect-mock.js +36 -1
- package/testing/mocks/canvas-mock.js +187 -1
- package/testing/mocks/create-mock-element.js +99 -1
- package/testing/mocks/create-range-mock.js +47 -1
- package/testing/mocks/dom-rect-mock.js +56 -1
- package/testing/mocks/fetch-mock.js +38 -1
- package/testing/mocks/intersection-observer-mock.js +58 -1
- package/testing/mocks/match-media-mock.js +45 -1
- package/testing/mocks/offset-height-mock.js +39 -1
- package/testing/mocks/offset-width-mock.js +39 -1
- package/testing/mocks/pointer-event-mock.js +42 -1
- package/testing/mocks/resize-observer-mock.js +42 -1
- package/testing/mocks/screen-size-mock.js +34 -1
- package/testing/mocks/scroll-into-view-mock.js +34 -1
- package/testing/mocks/scroll-width-mock.js +39 -1
- package/testing/mocks/select-mock.js +45 -1
- package/testing/mocks/table-virtualization-mock.js +47 -1
- package/testing/mocks/text-ellipsis-mock.js +38 -1
- package/testing/setup.js +57 -1
|
@@ -1 +1,33 @@
|
|
|
1
|
-
var
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
+
}
|
package/core/utils/isBrowser.js
CHANGED
|
@@ -1 +1,25 @@
|
|
|
1
|
-
var
|
|
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
|
|
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
|
+
}
|
|
@@ -1,2 +1,89 @@
|
|
|
1
|
-
import
|
|
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,
|
|
6
|
-
"names": [
|
|
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
|
|
@@ -1,2 +1,53 @@
|
|
|
1
|
-
import
|
|
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,
|
|
6
|
-
"names": ["
|
|
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
|
|
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,
|
|
6
|
-
"names": [
|
|
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
|
|
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,
|
|
6
|
-
"names": [
|
|
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
|
|
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,
|
|
6
|
-
"names": [
|
|
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
|
|
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
|