@contember/react-devbar 2.0.0-alpha.36 → 2.0.0-alpha.37
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/dist/development/src/ui/DevBar/DevBar.cjs +128 -174
- package/dist/development/src/ui/DevBar/DevBar.cjs.map +1 -1
- package/dist/development/src/ui/DevBar/DevBar.js +130 -176
- package/dist/development/src/ui/DevBar/DevBar.js.map +1 -1
- package/dist/development/src/ui/DevError/DevErrorList.cjs +3 -3
- package/dist/development/src/ui/DevError/DevErrorList.cjs.map +1 -1
- package/dist/development/src/ui/DevError/DevErrorList.js +3 -3
- package/dist/development/src/ui/DevError/DevErrorList.js.map +1 -1
- package/dist/production/src/ui/DevBar/DevBar.cjs +74 -112
- package/dist/production/src/ui/DevBar/DevBar.cjs.map +1 -1
- package/dist/production/src/ui/DevBar/DevBar.js +77 -115
- package/dist/production/src/ui/DevBar/DevBar.js.map +1 -1
- package/dist/production/src/ui/DevError/DevErrorList.cjs +3 -3
- package/dist/production/src/ui/DevError/DevErrorList.cjs.map +1 -1
- package/dist/production/src/ui/DevError/DevErrorList.js +3 -3
- package/dist/production/src/ui/DevError/DevErrorList.js.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/dist/types/ui/DevBar/DevBar.d.ts +5 -4
- package/dist/types/ui/DevBar/DevBar.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/index.css +286 -231
- package/src/ui/DevBar/DevBar.tsx +72 -97
- package/src/ui/DevError/DevErrorList.tsx +3 -3
|
@@ -7,12 +7,10 @@ const React = require("react");
|
|
|
7
7
|
const className = (cls) => cls ? `cui-devBar-${cls}` : "cui-devBar";
|
|
8
8
|
const DevBar = ({
|
|
9
9
|
breakpoint = 768,
|
|
10
|
-
children
|
|
11
|
-
brand
|
|
10
|
+
children
|
|
12
11
|
}) => {
|
|
13
|
-
const [expanded, setExpanded] = React.useState(
|
|
12
|
+
const [expanded, setExpanded] = React.useState(false);
|
|
14
13
|
const isSmallScreen = reactUtils.useWindowSize().width < breakpoint;
|
|
15
|
-
const toggleButtonRef = React.useRef(null);
|
|
16
14
|
const handleToggle = reactUtils.useReferentiallyStableCallback(() => {
|
|
17
15
|
setExpanded((expanded2) => !expanded2);
|
|
18
16
|
});
|
|
@@ -21,16 +19,7 @@ const DevBar = ({
|
|
|
21
19
|
if (event.code === "KeyJ" && (event.ctrlKey || event.metaKey)) {
|
|
22
20
|
event.preventDefault();
|
|
23
21
|
event.stopPropagation();
|
|
24
|
-
|
|
25
|
-
setExpanded(false);
|
|
26
|
-
toggleButtonRef.current?.blur();
|
|
27
|
-
} else {
|
|
28
|
-
if (toggleButtonRef.current !== document.activeElement) {
|
|
29
|
-
toggleButtonRef.current?.focus();
|
|
30
|
-
} else {
|
|
31
|
-
toggleButtonRef.current?.blur();
|
|
32
|
-
}
|
|
33
|
-
}
|
|
22
|
+
handleToggle();
|
|
34
23
|
}
|
|
35
24
|
}
|
|
36
25
|
document.addEventListener("keydown", handleKeyDown);
|
|
@@ -40,121 +29,94 @@ const DevBar = ({
|
|
|
40
29
|
reactUtils.useOnElementClickOutsideCallback(devBarContentRef, () => {
|
|
41
30
|
if (expanded) {
|
|
42
31
|
setExpanded(false);
|
|
43
|
-
toggleButtonRef.current?.blur();
|
|
44
32
|
}
|
|
45
33
|
});
|
|
46
34
|
const id = `dev-bar-panel${reactUtils.useId()}`;
|
|
47
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
35
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
48
36
|
"section",
|
|
49
37
|
{
|
|
50
|
-
"data-transparent": true,
|
|
51
|
-
"data-overrides-lucide-icons": true,
|
|
38
|
+
"data-transparent": "true",
|
|
39
|
+
"data-overrides-lucide-icons": "true",
|
|
52
40
|
"data-expanded": utilities.dataAttribute(expanded),
|
|
53
41
|
"data-small-screen": utilities.dataAttribute(isSmallScreen),
|
|
54
42
|
className: className(null),
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}
|
|
43
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: devBarContentRef, className: className("content"), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
44
|
+
"div",
|
|
45
|
+
{
|
|
46
|
+
"data-expanded": true,
|
|
47
|
+
id,
|
|
48
|
+
role: "dialog",
|
|
49
|
+
style: { display: "contents" },
|
|
50
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("panels"), children })
|
|
64
51
|
}
|
|
65
|
-
}
|
|
66
|
-
children: [
|
|
67
|
-
/* @__PURE__ */ jsxRuntime.jsx("style", { children: `svg { pointer-events: none }` }),
|
|
68
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { ref: devBarContentRef, className: className("content"), children: [
|
|
69
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
70
|
-
"div",
|
|
71
|
-
{
|
|
72
|
-
"data-expanded": utilities.dataAttribute(expanded),
|
|
73
|
-
id,
|
|
74
|
-
role: "dialog",
|
|
75
|
-
style: { display: "contents" },
|
|
76
|
-
children: [
|
|
77
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: className("brand"), children: brand }),
|
|
78
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: className("panels"), children })
|
|
79
|
-
]
|
|
80
|
-
}
|
|
81
|
-
),
|
|
82
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
83
|
-
"button",
|
|
84
|
-
{
|
|
85
|
-
ref: toggleButtonRef,
|
|
86
|
-
id: "dev-bar-toggle-button",
|
|
87
|
-
"aria-label": "Toggle Contember Developer Toolbar",
|
|
88
|
-
"aria-controls": id,
|
|
89
|
-
"aria-expanded": expanded,
|
|
90
|
-
className: className("close"),
|
|
91
|
-
onClick: handleToggle,
|
|
92
|
-
tabIndex: 0,
|
|
93
|
-
children: expanded ? "🗙" : "ᐸ"
|
|
94
|
-
}
|
|
95
|
-
)
|
|
96
|
-
] })
|
|
97
|
-
]
|
|
52
|
+
) })
|
|
98
53
|
}
|
|
99
54
|
);
|
|
100
55
|
};
|
|
101
56
|
const DevPanel = ({ heading, icon, children, preview }) => {
|
|
102
57
|
const id = `cui-devBar-panel-${reactUtils.useId()}`;
|
|
103
|
-
const
|
|
104
|
-
const
|
|
105
|
-
const
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
{
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
58
|
+
const dialogRef = React.useRef(null);
|
|
59
|
+
const triggerRef = React.useRef(null);
|
|
60
|
+
const handleOpen = React.useCallback(() => {
|
|
61
|
+
dialogRef.current?.showModal();
|
|
62
|
+
}, []);
|
|
63
|
+
const handleClose = React.useCallback(() => {
|
|
64
|
+
dialogRef.current?.close();
|
|
65
|
+
}, []);
|
|
66
|
+
React.useEffect(() => {
|
|
67
|
+
const dialog = dialogRef.current;
|
|
68
|
+
if (!dialog) return;
|
|
69
|
+
const handleClickOutside = (event) => {
|
|
70
|
+
const rect = dialog.getBoundingClientRect();
|
|
71
|
+
const isInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
|
|
72
|
+
if (!isInDialog) {
|
|
73
|
+
dialog.close();
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
dialog.addEventListener("click", handleClickOutside);
|
|
77
|
+
return () => dialog.removeEventListener("click", handleClickOutside);
|
|
78
|
+
}, []);
|
|
79
|
+
React.useEffect(() => {
|
|
80
|
+
const handleEscape = (event) => {
|
|
81
|
+
if (event.key === "Escape") {
|
|
82
|
+
handleClose();
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
document.addEventListener("keydown", handleEscape);
|
|
86
|
+
return () => document.removeEventListener("keydown", handleEscape);
|
|
87
|
+
}, [handleClose]);
|
|
88
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("trigger"), children: [
|
|
89
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
90
|
+
"button",
|
|
91
|
+
{
|
|
92
|
+
ref: triggerRef,
|
|
93
|
+
tabIndex: 0,
|
|
94
|
+
"aria-haspopup": "dialog",
|
|
95
|
+
"aria-controls": id,
|
|
96
|
+
className: className("trigger-label"),
|
|
97
|
+
onClick: handleOpen,
|
|
98
|
+
children: [
|
|
99
|
+
icon,
|
|
100
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: className("trigger-label-text"), children: preview ?? heading })
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
),
|
|
104
|
+
/* @__PURE__ */ jsxRuntime.jsx("dialog", { ref: dialogRef, id, className: className("panel"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("panel-content"), children: [
|
|
105
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("panel-header"), children: [
|
|
106
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "h4", children: heading }),
|
|
107
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
130
108
|
"button",
|
|
131
109
|
{
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
"aria-
|
|
135
|
-
"
|
|
136
|
-
className: className("trigger-label"),
|
|
137
|
-
onClick: reactUtils.useReferentiallyStableCallback(() => {
|
|
138
|
-
if (mouseEnterTimeStampRef.current && Date.now() < mouseEnterTimeStampRef.current) {
|
|
139
|
-
return;
|
|
140
|
-
} else {
|
|
141
|
-
setExpanded((expanded2) => !expanded2);
|
|
142
|
-
mouseEnterTimeStampRef.current = void 0;
|
|
143
|
-
}
|
|
144
|
-
}),
|
|
145
|
-
children: [
|
|
146
|
-
icon,
|
|
147
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: className("trigger-label-text"), children: preview ?? heading })
|
|
148
|
-
]
|
|
110
|
+
onClick: handleClose,
|
|
111
|
+
className: className("close-button"),
|
|
112
|
+
"aria-label": "Close",
|
|
113
|
+
children: "✕"
|
|
149
114
|
}
|
|
150
|
-
)
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
]
|
|
156
|
-
}
|
|
157
|
-
);
|
|
115
|
+
)
|
|
116
|
+
] }),
|
|
117
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: className("panel-body"), children })
|
|
118
|
+
] }) })
|
|
119
|
+
] });
|
|
158
120
|
};
|
|
159
121
|
exports.DevBar = DevBar;
|
|
160
122
|
exports.DevPanel = DevPanel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DevBar.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevBar/DevBar.tsx"],"sourcesContent":["import {\n\tuseId,\n\tuseOnElementClickOutsideCallback,\n\
|
|
1
|
+
{"version":3,"file":"DevBar.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevBar/DevBar.tsx"],"sourcesContent":["import {\n\tuseId,\n\tuseOnElementClickOutsideCallback,\n\tuseReferentiallyStableCallback,\n\tuseWindowSize,\n} from '@contember/react-utils'\nimport { dataAttribute } from '@contember/utilities'\nimport { PropsWithChildren, ReactNode, useCallback, useEffect, useRef, useState } from 'react'\n\nconst className = (cls: string | null) => cls ? `cui-devBar-${cls}` : 'cui-devBar'\n\nexport const DevBar = ({\n\tbreakpoint = 768,\n\tchildren,\n}: PropsWithChildren<{\n\tbreakpoint?: number\n}>) => {\n\tconst [expanded, setExpanded] = useState(false)\n\tconst isSmallScreen = useWindowSize().width < breakpoint\n\n\tconst handleToggle = useReferentiallyStableCallback(() => {\n\t\tsetExpanded(expanded => !expanded)\n\t})\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.code === 'KeyJ' && (event.ctrlKey || event.metaKey)) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tevent.stopPropagation()\n\n\t\t\t\thandleToggle()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown)\n\t\treturn () => document.removeEventListener('keydown', handleKeyDown)\n\t}, [expanded, handleToggle])\n\n\tconst devBarContentRef = useRef<HTMLDivElement>(null)\n\n\tuseOnElementClickOutsideCallback(devBarContentRef, () => {\n\t\tif (expanded) {\n\t\t\tsetExpanded(false)\n\t\t}\n\t})\n\n\tconst id = `dev-bar-panel${useId()}`\n\n\treturn (\n\t\t<section\n\t\t\tdata-transparent=\"true\"\n\t\t\tdata-overrides-lucide-icons=\"true\"\n\t\t\tdata-expanded={dataAttribute(expanded)}\n\t\t\tdata-small-screen={dataAttribute(isSmallScreen)}\n\t\t\tclassName={className(null)}\n\t\t>\n\t\t\t<div ref={devBarContentRef} className={className('content')}>\n\t\t\t\t<div\n\t\t\t\t\tdata-expanded={true}\n\t\t\t\t\tid={id}\n\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\tstyle={{ display: 'contents' }}\n\t\t\t\t>\n\t\t\t\t\t<div className={className('panels')}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t)\n}\n\ninterface DevPanelProps {\n\ticon: ReactNode\n\theading: ReactNode\n\tchildren: ReactNode\n\tpreview?: ReactNode\n}\n\nexport const DevPanel = ({ heading, icon, children, preview }: DevPanelProps) => {\n\tconst id = `cui-devBar-panel-${useId()}`\n\tconst dialogRef = useRef<HTMLDialogElement>(null)\n\tconst triggerRef = useRef<HTMLButtonElement>(null)\n\n\tconst handleOpen = useCallback(() => {\n\t\tdialogRef.current?.showModal()\n\t}, [])\n\n\tconst handleClose = useCallback(() => {\n\t\tdialogRef.current?.close()\n\t}, [])\n\n\tuseEffect(() => {\n\t\tconst dialog = dialogRef.current\n\t\tif (!dialog) return\n\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tconst rect = dialog.getBoundingClientRect()\n\t\t\tconst isInDialog = (\n\t\t\t\trect.top <= event.clientY &&\n\t\t\t\tevent.clientY <= rect.top + rect.height &&\n\t\t\t\trect.left <= event.clientX &&\n\t\t\t\tevent.clientX <= rect.left + rect.width\n\t\t\t)\n\n\t\t\tif (!isInDialog) {\n\t\t\t\tdialog.close()\n\t\t\t}\n\t\t}\n\n\t\tdialog.addEventListener('click', handleClickOutside)\n\t\treturn () => dialog.removeEventListener('click', handleClickOutside)\n\t}, [])\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\thandleClose()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleEscape)\n\t\treturn () => document.removeEventListener('keydown', handleEscape)\n\t}, [handleClose])\n\n\treturn (\n\t\t<div className={className('trigger')}>\n\t\t\t<button\n\t\t\t\tref={triggerRef}\n\t\t\t\ttabIndex={0}\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\taria-controls={id}\n\t\t\t\tclassName={className('trigger-label')}\n\t\t\t\tonClick={handleOpen}\n\t\t\t>\n\t\t\t\t{icon}\n\t\t\t\t<span className={className('trigger-label-text')}>\n\t\t\t\t\t{preview ?? heading}\n\t\t\t\t</span>\n\t\t\t</button>\n\n\t\t\t<dialog ref={dialogRef} id={id} className={className('panel')}>\n\t\t\t\t<div className={className('panel-content')}>\n\t\t\t\t\t<div className={className('panel-header')}>\n\t\t\t\t\t\t<h2 className=\"h4\">{heading}</h2>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\t\tclassName={className('close-button')}\n\t\t\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t✕\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={className('panel-body')}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</dialog>\n\t\t</div>\n\t)\n}\n"],"names":["useState","useWindowSize","useReferentiallyStableCallback","expanded","useEffect","useRef","useOnElementClickOutsideCallback","useId","jsx","dataAttribute","useCallback","jsxs"],"mappings":"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"}
|
|
@@ -1,16 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useWindowSize, useReferentiallyStableCallback, useOnElementClickOutsideCallback, useId
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useWindowSize, useReferentiallyStableCallback, useOnElementClickOutsideCallback, useId } from "@contember/react-utils";
|
|
3
3
|
import { dataAttribute } from "@contember/utilities";
|
|
4
|
-
import { useState, useRef,
|
|
4
|
+
import { useState, useEffect, useRef, useCallback } from "react";
|
|
5
5
|
const className = (cls) => cls ? `cui-devBar-${cls}` : "cui-devBar";
|
|
6
6
|
const DevBar = ({
|
|
7
7
|
breakpoint = 768,
|
|
8
|
-
children
|
|
9
|
-
brand
|
|
8
|
+
children
|
|
10
9
|
}) => {
|
|
11
|
-
const [expanded, setExpanded] = useState(
|
|
10
|
+
const [expanded, setExpanded] = useState(false);
|
|
12
11
|
const isSmallScreen = useWindowSize().width < breakpoint;
|
|
13
|
-
const toggleButtonRef = useRef(null);
|
|
14
12
|
const handleToggle = useReferentiallyStableCallback(() => {
|
|
15
13
|
setExpanded((expanded2) => !expanded2);
|
|
16
14
|
});
|
|
@@ -19,16 +17,7 @@ const DevBar = ({
|
|
|
19
17
|
if (event.code === "KeyJ" && (event.ctrlKey || event.metaKey)) {
|
|
20
18
|
event.preventDefault();
|
|
21
19
|
event.stopPropagation();
|
|
22
|
-
|
|
23
|
-
setExpanded(false);
|
|
24
|
-
toggleButtonRef.current?.blur();
|
|
25
|
-
} else {
|
|
26
|
-
if (toggleButtonRef.current !== document.activeElement) {
|
|
27
|
-
toggleButtonRef.current?.focus();
|
|
28
|
-
} else {
|
|
29
|
-
toggleButtonRef.current?.blur();
|
|
30
|
-
}
|
|
31
|
-
}
|
|
20
|
+
handleToggle();
|
|
32
21
|
}
|
|
33
22
|
}
|
|
34
23
|
document.addEventListener("keydown", handleKeyDown);
|
|
@@ -38,121 +27,94 @@ const DevBar = ({
|
|
|
38
27
|
useOnElementClickOutsideCallback(devBarContentRef, () => {
|
|
39
28
|
if (expanded) {
|
|
40
29
|
setExpanded(false);
|
|
41
|
-
toggleButtonRef.current?.blur();
|
|
42
30
|
}
|
|
43
31
|
});
|
|
44
32
|
const id = `dev-bar-panel${useId()}`;
|
|
45
|
-
return /* @__PURE__ */
|
|
33
|
+
return /* @__PURE__ */ jsx(
|
|
46
34
|
"section",
|
|
47
35
|
{
|
|
48
|
-
"data-transparent": true,
|
|
49
|
-
"data-overrides-lucide-icons": true,
|
|
36
|
+
"data-transparent": "true",
|
|
37
|
+
"data-overrides-lucide-icons": "true",
|
|
50
38
|
"data-expanded": dataAttribute(expanded),
|
|
51
39
|
"data-small-screen": dataAttribute(isSmallScreen),
|
|
52
40
|
className: className(null),
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}
|
|
41
|
+
children: /* @__PURE__ */ jsx("div", { ref: devBarContentRef, className: className("content"), children: /* @__PURE__ */ jsx(
|
|
42
|
+
"div",
|
|
43
|
+
{
|
|
44
|
+
"data-expanded": true,
|
|
45
|
+
id,
|
|
46
|
+
role: "dialog",
|
|
47
|
+
style: { display: "contents" },
|
|
48
|
+
children: /* @__PURE__ */ jsx("div", { className: className("panels"), children })
|
|
62
49
|
}
|
|
63
|
-
}
|
|
64
|
-
children: [
|
|
65
|
-
/* @__PURE__ */ jsx("style", { children: `svg { pointer-events: none }` }),
|
|
66
|
-
/* @__PURE__ */ jsxs("div", { ref: devBarContentRef, className: className("content"), children: [
|
|
67
|
-
/* @__PURE__ */ jsxs(
|
|
68
|
-
"div",
|
|
69
|
-
{
|
|
70
|
-
"data-expanded": dataAttribute(expanded),
|
|
71
|
-
id,
|
|
72
|
-
role: "dialog",
|
|
73
|
-
style: { display: "contents" },
|
|
74
|
-
children: [
|
|
75
|
-
/* @__PURE__ */ jsx("div", { className: className("brand"), children: brand }),
|
|
76
|
-
/* @__PURE__ */ jsx("div", { className: className("panels"), children })
|
|
77
|
-
]
|
|
78
|
-
}
|
|
79
|
-
),
|
|
80
|
-
/* @__PURE__ */ jsx(
|
|
81
|
-
"button",
|
|
82
|
-
{
|
|
83
|
-
ref: toggleButtonRef,
|
|
84
|
-
id: "dev-bar-toggle-button",
|
|
85
|
-
"aria-label": "Toggle Contember Developer Toolbar",
|
|
86
|
-
"aria-controls": id,
|
|
87
|
-
"aria-expanded": expanded,
|
|
88
|
-
className: className("close"),
|
|
89
|
-
onClick: handleToggle,
|
|
90
|
-
tabIndex: 0,
|
|
91
|
-
children: expanded ? "🗙" : "ᐸ"
|
|
92
|
-
}
|
|
93
|
-
)
|
|
94
|
-
] })
|
|
95
|
-
]
|
|
50
|
+
) })
|
|
96
51
|
}
|
|
97
52
|
);
|
|
98
53
|
};
|
|
99
54
|
const DevPanel = ({ heading, icon, children, preview }) => {
|
|
100
55
|
const id = `cui-devBar-panel-${useId()}`;
|
|
101
|
-
const
|
|
102
|
-
const
|
|
103
|
-
const
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
{
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
56
|
+
const dialogRef = useRef(null);
|
|
57
|
+
const triggerRef = useRef(null);
|
|
58
|
+
const handleOpen = useCallback(() => {
|
|
59
|
+
dialogRef.current?.showModal();
|
|
60
|
+
}, []);
|
|
61
|
+
const handleClose = useCallback(() => {
|
|
62
|
+
dialogRef.current?.close();
|
|
63
|
+
}, []);
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
const dialog = dialogRef.current;
|
|
66
|
+
if (!dialog) return;
|
|
67
|
+
const handleClickOutside = (event) => {
|
|
68
|
+
const rect = dialog.getBoundingClientRect();
|
|
69
|
+
const isInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
|
|
70
|
+
if (!isInDialog) {
|
|
71
|
+
dialog.close();
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
dialog.addEventListener("click", handleClickOutside);
|
|
75
|
+
return () => dialog.removeEventListener("click", handleClickOutside);
|
|
76
|
+
}, []);
|
|
77
|
+
useEffect(() => {
|
|
78
|
+
const handleEscape = (event) => {
|
|
79
|
+
if (event.key === "Escape") {
|
|
80
|
+
handleClose();
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
document.addEventListener("keydown", handleEscape);
|
|
84
|
+
return () => document.removeEventListener("keydown", handleEscape);
|
|
85
|
+
}, [handleClose]);
|
|
86
|
+
return /* @__PURE__ */ jsxs("div", { className: className("trigger"), children: [
|
|
87
|
+
/* @__PURE__ */ jsxs(
|
|
88
|
+
"button",
|
|
89
|
+
{
|
|
90
|
+
ref: triggerRef,
|
|
91
|
+
tabIndex: 0,
|
|
92
|
+
"aria-haspopup": "dialog",
|
|
93
|
+
"aria-controls": id,
|
|
94
|
+
className: className("trigger-label"),
|
|
95
|
+
onClick: handleOpen,
|
|
96
|
+
children: [
|
|
97
|
+
icon,
|
|
98
|
+
/* @__PURE__ */ jsx("span", { className: className("trigger-label-text"), children: preview ?? heading })
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
),
|
|
102
|
+
/* @__PURE__ */ jsx("dialog", { ref: dialogRef, id, className: className("panel"), children: /* @__PURE__ */ jsxs("div", { className: className("panel-content"), children: [
|
|
103
|
+
/* @__PURE__ */ jsxs("div", { className: className("panel-header"), children: [
|
|
104
|
+
/* @__PURE__ */ jsx("h2", { className: "h4", children: heading }),
|
|
105
|
+
/* @__PURE__ */ jsx(
|
|
128
106
|
"button",
|
|
129
107
|
{
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
"aria-
|
|
133
|
-
"
|
|
134
|
-
className: className("trigger-label"),
|
|
135
|
-
onClick: useReferentiallyStableCallback(() => {
|
|
136
|
-
if (mouseEnterTimeStampRef.current && Date.now() < mouseEnterTimeStampRef.current) {
|
|
137
|
-
return;
|
|
138
|
-
} else {
|
|
139
|
-
setExpanded((expanded2) => !expanded2);
|
|
140
|
-
mouseEnterTimeStampRef.current = void 0;
|
|
141
|
-
}
|
|
142
|
-
}),
|
|
143
|
-
children: [
|
|
144
|
-
icon,
|
|
145
|
-
/* @__PURE__ */ jsx("span", { className: className("trigger-label-text"), children: preview ?? heading })
|
|
146
|
-
]
|
|
108
|
+
onClick: handleClose,
|
|
109
|
+
className: className("close-button"),
|
|
110
|
+
"aria-label": "Close",
|
|
111
|
+
children: "✕"
|
|
147
112
|
}
|
|
148
|
-
)
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
]
|
|
154
|
-
}
|
|
155
|
-
);
|
|
113
|
+
)
|
|
114
|
+
] }),
|
|
115
|
+
/* @__PURE__ */ jsx("div", { className: className("panel-body"), children })
|
|
116
|
+
] }) })
|
|
117
|
+
] });
|
|
156
118
|
};
|
|
157
119
|
export {
|
|
158
120
|
DevBar,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DevBar.js","sources":["../../../../../../packages/react-devbar/src/ui/DevBar/DevBar.tsx"],"sourcesContent":["import {\n\tuseId,\n\tuseOnElementClickOutsideCallback,\n\
|
|
1
|
+
{"version":3,"file":"DevBar.js","sources":["../../../../../../packages/react-devbar/src/ui/DevBar/DevBar.tsx"],"sourcesContent":["import {\n\tuseId,\n\tuseOnElementClickOutsideCallback,\n\tuseReferentiallyStableCallback,\n\tuseWindowSize,\n} from '@contember/react-utils'\nimport { dataAttribute } from '@contember/utilities'\nimport { PropsWithChildren, ReactNode, useCallback, useEffect, useRef, useState } from 'react'\n\nconst className = (cls: string | null) => cls ? `cui-devBar-${cls}` : 'cui-devBar'\n\nexport const DevBar = ({\n\tbreakpoint = 768,\n\tchildren,\n}: PropsWithChildren<{\n\tbreakpoint?: number\n}>) => {\n\tconst [expanded, setExpanded] = useState(false)\n\tconst isSmallScreen = useWindowSize().width < breakpoint\n\n\tconst handleToggle = useReferentiallyStableCallback(() => {\n\t\tsetExpanded(expanded => !expanded)\n\t})\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.code === 'KeyJ' && (event.ctrlKey || event.metaKey)) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tevent.stopPropagation()\n\n\t\t\t\thandleToggle()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown)\n\t\treturn () => document.removeEventListener('keydown', handleKeyDown)\n\t}, [expanded, handleToggle])\n\n\tconst devBarContentRef = useRef<HTMLDivElement>(null)\n\n\tuseOnElementClickOutsideCallback(devBarContentRef, () => {\n\t\tif (expanded) {\n\t\t\tsetExpanded(false)\n\t\t}\n\t})\n\n\tconst id = `dev-bar-panel${useId()}`\n\n\treturn (\n\t\t<section\n\t\t\tdata-transparent=\"true\"\n\t\t\tdata-overrides-lucide-icons=\"true\"\n\t\t\tdata-expanded={dataAttribute(expanded)}\n\t\t\tdata-small-screen={dataAttribute(isSmallScreen)}\n\t\t\tclassName={className(null)}\n\t\t>\n\t\t\t<div ref={devBarContentRef} className={className('content')}>\n\t\t\t\t<div\n\t\t\t\t\tdata-expanded={true}\n\t\t\t\t\tid={id}\n\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\tstyle={{ display: 'contents' }}\n\t\t\t\t>\n\t\t\t\t\t<div className={className('panels')}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t)\n}\n\ninterface DevPanelProps {\n\ticon: ReactNode\n\theading: ReactNode\n\tchildren: ReactNode\n\tpreview?: ReactNode\n}\n\nexport const DevPanel = ({ heading, icon, children, preview }: DevPanelProps) => {\n\tconst id = `cui-devBar-panel-${useId()}`\n\tconst dialogRef = useRef<HTMLDialogElement>(null)\n\tconst triggerRef = useRef<HTMLButtonElement>(null)\n\n\tconst handleOpen = useCallback(() => {\n\t\tdialogRef.current?.showModal()\n\t}, [])\n\n\tconst handleClose = useCallback(() => {\n\t\tdialogRef.current?.close()\n\t}, [])\n\n\tuseEffect(() => {\n\t\tconst dialog = dialogRef.current\n\t\tif (!dialog) return\n\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tconst rect = dialog.getBoundingClientRect()\n\t\t\tconst isInDialog = (\n\t\t\t\trect.top <= event.clientY &&\n\t\t\t\tevent.clientY <= rect.top + rect.height &&\n\t\t\t\trect.left <= event.clientX &&\n\t\t\t\tevent.clientX <= rect.left + rect.width\n\t\t\t)\n\n\t\t\tif (!isInDialog) {\n\t\t\t\tdialog.close()\n\t\t\t}\n\t\t}\n\n\t\tdialog.addEventListener('click', handleClickOutside)\n\t\treturn () => dialog.removeEventListener('click', handleClickOutside)\n\t}, [])\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\thandleClose()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleEscape)\n\t\treturn () => document.removeEventListener('keydown', handleEscape)\n\t}, [handleClose])\n\n\treturn (\n\t\t<div className={className('trigger')}>\n\t\t\t<button\n\t\t\t\tref={triggerRef}\n\t\t\t\ttabIndex={0}\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\taria-controls={id}\n\t\t\t\tclassName={className('trigger-label')}\n\t\t\t\tonClick={handleOpen}\n\t\t\t>\n\t\t\t\t{icon}\n\t\t\t\t<span className={className('trigger-label-text')}>\n\t\t\t\t\t{preview ?? heading}\n\t\t\t\t</span>\n\t\t\t</button>\n\n\t\t\t<dialog ref={dialogRef} id={id} className={className('panel')}>\n\t\t\t\t<div className={className('panel-content')}>\n\t\t\t\t\t<div className={className('panel-header')}>\n\t\t\t\t\t\t<h2 className=\"h4\">{heading}</h2>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\t\tclassName={className('close-button')}\n\t\t\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t✕\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={className('panel-body')}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</dialog>\n\t\t</div>\n\t)\n}\n"],"names":["expanded"],"mappings":"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"}
|
|
@@ -31,11 +31,11 @@ function DevErrorList({
|
|
|
31
31
|
errorCount
|
|
32
32
|
] }),
|
|
33
33
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("switcherButtons"), children: [
|
|
34
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: className("switcherButton"), onClick: onPrevious, children: "
|
|
35
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: className("switcherButton"), onClick: onNext, children: "
|
|
34
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { className: className("switcherButton"), onClick: onPrevious, children: "←" }),
|
|
35
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { className: className("switcherButton"), onClick: onNext, children: "→" })
|
|
36
36
|
] })
|
|
37
37
|
] }) : null,
|
|
38
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: className("close"), children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: className("closeButton"), onClick: onClose, children: "
|
|
38
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: className("close"), children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: className("closeButton"), onClick: onClose, children: "✕" }) })
|
|
39
39
|
] })
|
|
40
40
|
] }),
|
|
41
41
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: className("content"), children: /* @__PURE__ */ jsxRuntime.jsx(DevErrorInner.DevErrorInner, { error: currentError }) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DevErrorList.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorList.tsx"],"sourcesContent":["import { DevErrorInner } from './DevErrorInner'\nimport { ProcessedError } from './types'\nimport { useEffect } from 'react'\n\nexport interface DevErrorListProps {\n\tcurrentError: ProcessedError\n\tcurrentErrorSource: string\n\tcurrentErrorIndex: number\n\terrorCount: number\n\tonPrevious: () => void\n\tonNext: () => void\n\tonClose: () => void\n}\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\n\nexport function DevErrorList({\n\tcurrentError,\n\tcurrentErrorIndex,\n\tcurrentErrorSource,\n\terrorCount,\n\tonClose,\n\tonNext,\n\tonPrevious,\n}: DevErrorListProps) {\n\tuseEffect(() => {\n\t\tdocument.body.classList.add('cui-devError-body')\n\t\treturn () => {\n\t\t\tdocument.body.classList.remove('cui-devError-body')\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className={className()}>\n\t\t\t<div className={className('in')}>\n\t\t\t\t<div className={className('bar')}>\n\t\t\t\t\t<div className={className('errorSource')}>{currentErrorSource}</div>\n\t\t\t\t\t<div className={className('actions')}>\n\t\t\t\t\t\t{errorCount > 1 ? (\n\t\t\t\t\t\t\t<div className={className('switcher')}>\n\t\t\t\t\t\t\t\t<p className={className('errorCount')}>\n\t\t\t\t\t\t\t\t\tError {currentErrorIndex + 1} of {errorCount}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<div className={className('switcherButtons')}>\n\t\t\t\t\t\t\t\t\t<button className={className('switcherButton')} onClick={onPrevious}>\n\t\t\t\t\t\t\t\t\t\t
|
|
1
|
+
{"version":3,"file":"DevErrorList.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorList.tsx"],"sourcesContent":["import { DevErrorInner } from './DevErrorInner'\nimport { ProcessedError } from './types'\nimport { useEffect } from 'react'\n\nexport interface DevErrorListProps {\n\tcurrentError: ProcessedError\n\tcurrentErrorSource: string\n\tcurrentErrorIndex: number\n\terrorCount: number\n\tonPrevious: () => void\n\tonNext: () => void\n\tonClose: () => void\n}\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\n\nexport function DevErrorList({\n\tcurrentError,\n\tcurrentErrorIndex,\n\tcurrentErrorSource,\n\terrorCount,\n\tonClose,\n\tonNext,\n\tonPrevious,\n}: DevErrorListProps) {\n\tuseEffect(() => {\n\t\tdocument.body.classList.add('cui-devError-body')\n\t\treturn () => {\n\t\t\tdocument.body.classList.remove('cui-devError-body')\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className={className()}>\n\t\t\t<div className={className('in')}>\n\t\t\t\t<div className={className('bar')}>\n\t\t\t\t\t<div className={className('errorSource')}>{currentErrorSource}</div>\n\t\t\t\t\t<div className={className('actions')}>\n\t\t\t\t\t\t{errorCount > 1 ? (\n\t\t\t\t\t\t\t<div className={className('switcher')}>\n\t\t\t\t\t\t\t\t<p className={className('errorCount')}>\n\t\t\t\t\t\t\t\t\tError {currentErrorIndex + 1} of {errorCount}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<div className={className('switcherButtons')}>\n\t\t\t\t\t\t\t\t\t<button className={className('switcherButton')} onClick={onPrevious}>\n\t\t\t\t\t\t\t\t\t\t←\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button className={className('switcherButton')} onClick={onNext}>\n\t\t\t\t\t\t\t\t\t\t→\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<div className={className('close')}>\n\t\t\t\t\t\t\t<button className={className('closeButton')} onClick={onClose}>\n\t\t\t\t\t\t\t\t✕\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className={className('content')}>\n\t\t\t\t\t<DevErrorInner error={currentError} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"names":["useEffect","jsx","jsxs","DevErrorInner"],"mappings":";;;;;AAcA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAElE,SAAS,aAAa;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAsB;AACrBA,QAAAA,UAAU,MAAM;AACN,aAAA,KAAK,UAAU,IAAI,mBAAmB;AAC/C,WAAO,MAAM;AACH,eAAA,KAAK,UAAU,OAAO,mBAAmB;AAAA,IACnD;AAAA,EACD,GAAG,EAAE;AAGJ,SAAAC,2BAAA,IAAC,OAAI,EAAA,WAAW,UAAU,GACzB,0CAAC,OAAI,EAAA,WAAW,UAAU,IAAI,GAC7B,UAAA;AAAA,IAAAC,2BAAA,KAAC,OAAI,EAAA,WAAW,UAAU,KAAK,GAC9B,UAAA;AAAA,MAAAD,+BAAC,OAAI,EAAA,WAAW,UAAU,aAAa,GAAI,UAAmB,oBAAA;AAAA,MAC7DC,2BAAA,KAAA,OAAA,EAAI,WAAW,UAAU,SAAS,GACjC,UAAA;AAAA,QAAA,aAAa,IACZA,2BAAAA,KAAA,OAAA,EAAI,WAAW,UAAU,UAAU,GACnC,UAAA;AAAA,UAAAA,2BAAA,KAAC,KAAE,EAAA,WAAW,UAAU,YAAY,GAAG,UAAA;AAAA,YAAA;AAAA,YAC/B,oBAAoB;AAAA,YAAE;AAAA,YAAK;AAAA,UAAA,GACnC;AAAA,UACCA,2BAAA,KAAA,OAAA,EAAI,WAAW,UAAU,iBAAiB,GAC1C,UAAA;AAAA,YAAAD,2BAAAA,IAAC,YAAO,WAAW,UAAU,gBAAgB,GAAG,SAAS,YAAY,UAErE,KAAA;AAAA,YACAA,+BAAC,YAAO,WAAW,UAAU,gBAAgB,GAAG,SAAS,QAAQ,UAEjE,IAAA,CAAA;AAAA,UAAA,EACD,CAAA;AAAA,QAAA,EAAA,CACD,IACG;AAAA,QACHA,2BAAA,IAAA,OAAA,EAAI,WAAW,UAAU,OAAO,GAChC,UAAAA,+BAAC,UAAO,EAAA,WAAW,UAAU,aAAa,GAAG,SAAS,SAAS,eAE/D,EACD,CAAA;AAAA,MAAA,EACD,CAAA;AAAA,IAAA,GACD;AAAA,IACAA,2BAAAA,IAAC,OAAI,EAAA,WAAW,UAAU,SAAS,GAClC,UAACA,2BAAAA,IAAAE,cAAAA,eAAA,EAAc,OAAO,aAAc,CAAA,EACrC,CAAA;AAAA,EAAA,EAAA,CACD,EACD,CAAA;AAEF;;"}
|