inital commit

This commit is contained in:
2026-01-01 15:25:19 +05:30
commit f0ae49465a
36361 changed files with 4894111 additions and 0 deletions

View File

@@ -0,0 +1,5 @@
import type { OriginalStackFrame } from '../../../utils/stack-frame';
export declare const CallStackFrame: React.FC<{
frame: OriginalStackFrame;
}>;
export declare const CALL_STACK_FRAME_STYLES = "\n [data-nextjs-call-stack-frame-no-source] {\n padding: 6px 8px;\n margin-bottom: 4px;\n\n border-radius: var(--rounded-lg);\n }\n\n [data-nextjs-call-stack-frame-no-source]:last-child {\n margin-bottom: 0;\n }\n\n [data-nextjs-call-stack-frame-ignored=\"true\"] {\n opacity: 0.6;\n }\n\n [data-nextjs-call-stack-frame] {\n user-select: text;\n display: block;\n box-sizing: border-box;\n\n user-select: text;\n -webkit-user-select: text;\n -moz-user-select: text;\n -ms-user-select: text;\n\n padding: 6px 8px;\n\n border-radius: var(--rounded-lg);\n }\n\n .call-stack-frame-method-name {\n display: flex;\n align-items: center;\n gap: 4px;\n\n margin-bottom: 4px;\n font-family: var(--font-stack-monospace);\n\n color: var(--color-gray-1000);\n font-size: var(--size-14);\n font-weight: 500;\n line-height: var(--size-20);\n\n svg {\n width: var(--size-16px);\n height: var(--size-16px);\n }\n }\n\n .open-in-editor-button, .source-mapping-error-button {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--rounded-full);\n padding: 4px;\n color: var(--color-font);\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n\n &:focus-visible {\n outline: var(--focus-ring);\n outline-offset: -2px;\n }\n\n &:hover {\n background: var(--color-gray-100);\n }\n }\n\n .call-stack-frame-file-source {\n color: var(--color-gray-900);\n font-size: var(--size-14);\n line-height: var(--size-20);\n }\n";

View File

@@ -0,0 +1,94 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
CALL_STACK_FRAME_STYLES: null,
CallStackFrame: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CALL_STACK_FRAME_STYLES: function() {
return CALL_STACK_FRAME_STYLES;
},
CallStackFrame: function() {
return CallStackFrame;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _hotlinkedtext = require("../hot-linked-text");
const _external = require("../../icons/external");
const _stackframe = require("../../../utils/stack-frame");
const _useopenineditor = require("../../utils/use-open-in-editor");
const CallStackFrame = function CallStackFrame(param) {
let { frame } = param;
var _frame_originalStackFrame;
// TODO: ability to expand resolved frames
const f = (_frame_originalStackFrame = frame.originalStackFrame) != null ? _frame_originalStackFrame : frame.sourceStackFrame;
const hasSource = Boolean(frame.originalCodeFrame);
const open = (0, _useopenineditor.useOpenInEditor)(hasSource ? {
file: f.file,
lineNumber: f.lineNumber,
column: f.column
} : undefined);
// Format method to strip out the webpack layer prefix.
// e.g. (app-pages-browser)/./app/page.tsx -> ./app/page.tsx
const formattedMethod = f.methodName.replace(/^\([\w-]+\)\//, '');
// Formatted file source could be empty. e.g. <anonymous> will be formatted to empty string,
// we'll skip rendering the frame in this case.
const fileSource = (0, _stackframe.getFrameSource)(f);
if (!fileSource) {
return null;
}
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
"data-nextjs-call-stack-frame": true,
"data-nextjs-call-stack-frame-no-source": !hasSource,
"data-nextjs-call-stack-frame-ignored": frame.ignored,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "call-stack-frame-method-name",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_hotlinkedtext.HotlinkedText, {
text: formattedMethod
}),
hasSource && /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
onClick: open,
className: "open-in-editor-button",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_external.ExternalIcon, {
width: 16,
height: 16
})
}),
frame.error ? /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
className: "source-mapping-error-button",
onClick: ()=>console.error(frame.reason),
title: "Sourcemapping failed. Click to log cause of error.",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_external.SourceMappingErrorIcon, {
width: 16,
height: 16
})
}) : null
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "call-stack-frame-file-source",
"data-has-source": hasSource,
children: fileSource
})
]
});
};
const CALL_STACK_FRAME_STYLES = '\n [data-nextjs-call-stack-frame-no-source] {\n padding: 6px 8px;\n margin-bottom: 4px;\n\n border-radius: var(--rounded-lg);\n }\n\n [data-nextjs-call-stack-frame-no-source]:last-child {\n margin-bottom: 0;\n }\n\n [data-nextjs-call-stack-frame-ignored="true"] {\n opacity: 0.6;\n }\n\n [data-nextjs-call-stack-frame] {\n user-select: text;\n display: block;\n box-sizing: border-box;\n\n user-select: text;\n -webkit-user-select: text;\n -moz-user-select: text;\n -ms-user-select: text;\n\n padding: 6px 8px;\n\n border-radius: var(--rounded-lg);\n }\n\n .call-stack-frame-method-name {\n display: flex;\n align-items: center;\n gap: 4px;\n\n margin-bottom: 4px;\n font-family: var(--font-stack-monospace);\n\n color: var(--color-gray-1000);\n font-size: var(--size-14);\n font-weight: 500;\n line-height: var(--size-20);\n\n svg {\n width: var(--size-16px);\n height: var(--size-16px);\n }\n }\n\n .open-in-editor-button, .source-mapping-error-button {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--rounded-full);\n padding: 4px;\n color: var(--color-font);\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n\n &:focus-visible {\n outline: var(--focus-ring);\n outline-offset: -2px;\n }\n\n &:hover {\n background: var(--color-gray-100);\n }\n }\n\n .call-stack-frame-file-source {\n color: var(--color-gray-900);\n font-size: var(--size-14);\n line-height: var(--size-20);\n }\n';
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=call-stack-frame.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,7 @@
import type { StackFrame } from 'next/dist/compiled/stacktrace-parser';
export type CodeFrameProps = {
stackFrame: StackFrame;
codeFrame: string;
};
export declare function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps): import("react/jsx-runtime").JSX.Element;
export declare const CODE_FRAME_STYLES = "\n [data-nextjs-codeframe] {\n background-color: var(--color-background-200);\n overflow: hidden;\n color: var(--color-gray-1000);\n text-overflow: ellipsis;\n border: 1px solid var(--color-gray-400);\n border-radius: 8px;\n font-family: var(--font-stack-monospace);\n font-size: var(--size-12);\n line-height: var(--size-16);\n margin: 8px 0;\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n }\n\n .code-frame-link,\n .code-frame-pre {\n padding: 12px;\n }\n\n .code-frame-link svg {\n flex-shrink: 0;\n }\n\n .code-frame-link [data-text] {\n display: inline-flex;\n text-align: left;\n margin: auto 6px;\n }\n\n .code-frame-pre {\n white-space: pre-wrap;\n }\n\n .code-frame-header {\n width: 100%;\n transition: background 100ms ease-out;\n border-radius: 8px 8px 0 0;\n border-bottom: 1px solid var(--color-gray-400);\n }\n\n [data-with-open-in-editor-link-source-file] {\n padding: 4px;\n margin: -4px 0 -4px auto;\n border-radius: var(--rounded-full);\n margin-left: auto;\n\n &:focus-visible {\n outline: var(--focus-ring);\n outline-offset: -2px;\n }\n\n &:hover {\n background: var(--color-gray-100);\n }\n }\n\n [data-nextjs-codeframe]::selection,\n [data-nextjs-codeframe] *::selection {\n background-color: var(--color-ansi-selection);\n }\n\n [data-nextjs-codeframe] *:not(a) {\n color: inherit;\n background-color: transparent;\n font-family: var(--font-stack-monospace);\n }\n\n [data-nextjs-codeframe] > * {\n margin: 0;\n }\n\n .code-frame-link {\n display: flex;\n margin: 0;\n outline: 0;\n }\n .code-frame-link [data-icon='right'] {\n margin-left: auto;\n }\n\n [data-nextjs-codeframe] div > pre {\n overflow: hidden;\n display: inline-block;\n }\n\n [data-nextjs-codeframe] svg {\n color: var(--color-gray-900);\n }\n";

View File

@@ -0,0 +1,134 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
CODE_FRAME_STYLES: null,
CodeFrame: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CODE_FRAME_STYLES: function() {
return CODE_FRAME_STYLES;
},
CodeFrame: function() {
return CodeFrame;
}
});
const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
const _jsxruntime = require("react/jsx-runtime");
const _anser = /*#__PURE__*/ _interop_require_default._(require("next/dist/compiled/anser"));
const _stripansi = /*#__PURE__*/ _interop_require_default._(require("next/dist/compiled/strip-ansi"));
const _react = require("react");
const _hotlinkedtext = require("../hot-linked-text");
const _stackframe = require("../../../utils/stack-frame");
const _useopenineditor = require("../../utils/use-open-in-editor");
const _external = require("../../icons/external");
const _file = require("../../icons/file");
function CodeFrame(param) {
let { stackFrame, codeFrame } = param;
var _stackFrame_file;
// Strip leading spaces out of the code frame:
const formattedFrame = (0, _react.useMemo)(()=>{
const lines = codeFrame.split(/\r?\n/g);
// Find the minimum length of leading spaces after `|` in the code frame
const miniLeadingSpacesLength = lines.map((line)=>/^>? +\d+ +\| [ ]+/.exec((0, _stripansi.default)(line)) === null ? null : /^>? +\d+ +\| ( *)/.exec((0, _stripansi.default)(line))).filter(Boolean).map((v)=>v.pop()).reduce((c, n)=>isNaN(c) ? n.length : Math.min(c, n.length), NaN);
// When the minimum length of leading spaces is greater than 1, remove them
// from the code frame to help the indentation looks better when there's a lot leading spaces.
if (miniLeadingSpacesLength > 1) {
return lines.map((line, a)=>~(a = line.indexOf('|')) ? line.substring(0, a) + line.substring(a).replace("^\\ {" + miniLeadingSpacesLength + "}", '') : line).join('\n');
}
return lines.join('\n');
}, [
codeFrame
]);
const decoded = (0, _react.useMemo)(()=>{
return _anser.default.ansiToJson(formattedFrame, {
json: true,
use_classes: true,
remove_empty: true
});
}, [
formattedFrame
]);
const open = (0, _useopenineditor.useOpenInEditor)({
file: stackFrame.file,
lineNumber: stackFrame.lineNumber,
column: stackFrame.column
});
const fileExtension = stackFrame == null ? void 0 : (_stackFrame_file = stackFrame.file) == null ? void 0 : _stackFrame_file.split('.').pop();
// TODO: make the caret absolute
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
"data-nextjs-codeframe": true,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "code-frame-header",
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
className: "code-frame-link",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "code-frame-icon",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_file.FileIcon, {
lang: fileExtension
})
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
"data-text": true,
children: [
(0, _stackframe.getFrameSource)(stackFrame),
" @",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)(_hotlinkedtext.HotlinkedText, {
text: stackFrame.methodName
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
"aria-label": "Open in editor",
"data-with-open-in-editor-link-source-file": true,
onClick: open,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "code-frame-icon",
"data-icon": "right",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_external.ExternalIcon, {
width: 16,
height: 16
})
})
})
]
})
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
className: "code-frame-pre",
children: decoded.map((entry, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
style: {
color: entry.fg ? "var(--color-" + entry.fg + ")" : undefined,
...entry.decoration === 'bold' ? // having longer width than expected on Geist Mono font-weight
// above 600, hence a temporary fix is to use 500 for bold.
{
fontWeight: 500
} : entry.decoration === 'italic' ? {
fontStyle: 'italic'
} : undefined
},
children: entry.content
}, "frame-" + index))
})
]
});
}
const CODE_FRAME_STYLES = "\n [data-nextjs-codeframe] {\n background-color: var(--color-background-200);\n overflow: hidden;\n color: var(--color-gray-1000);\n text-overflow: ellipsis;\n border: 1px solid var(--color-gray-400);\n border-radius: 8px;\n font-family: var(--font-stack-monospace);\n font-size: var(--size-12);\n line-height: var(--size-16);\n margin: 8px 0;\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n }\n\n .code-frame-link,\n .code-frame-pre {\n padding: 12px;\n }\n\n .code-frame-link svg {\n flex-shrink: 0;\n }\n\n .code-frame-link [data-text] {\n display: inline-flex;\n text-align: left;\n margin: auto 6px;\n }\n\n .code-frame-pre {\n white-space: pre-wrap;\n }\n\n .code-frame-header {\n width: 100%;\n transition: background 100ms ease-out;\n border-radius: 8px 8px 0 0;\n border-bottom: 1px solid var(--color-gray-400);\n }\n\n [data-with-open-in-editor-link-source-file] {\n padding: 4px;\n margin: -4px 0 -4px auto;\n border-radius: var(--rounded-full);\n margin-left: auto;\n\n &:focus-visible {\n outline: var(--focus-ring);\n outline-offset: -2px;\n }\n\n &:hover {\n background: var(--color-gray-100);\n }\n }\n\n [data-nextjs-codeframe]::selection,\n [data-nextjs-codeframe] *::selection {\n background-color: var(--color-ansi-selection);\n }\n\n [data-nextjs-codeframe] *:not(a) {\n color: inherit;\n background-color: transparent;\n font-family: var(--font-stack-monospace);\n }\n\n [data-nextjs-codeframe] > * {\n margin: 0;\n }\n\n .code-frame-link {\n display: flex;\n margin: 0;\n outline: 0;\n }\n .code-frame-link [data-icon='right'] {\n margin-left: auto;\n }\n\n [data-nextjs-codeframe] div > pre {\n overflow: hidden;\n display: inline-block;\n }\n\n [data-nextjs-codeframe] svg {\n color: var(--color-gray-900);\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=code-frame.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,8 @@
import * as React from 'react';
export declare function CopyButton({ actionLabel, successLabel, content, icon, disabled, ...props }: React.HTMLProps<HTMLButtonElement> & {
actionLabel: string;
successLabel: string;
content: string;
icon?: React.ReactNode;
}): import("react/jsx-runtime").JSX.Element;
export declare const COPY_BUTTON_STYLES = "\n .nextjs-data-copy-button {\n color: inherit;\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n }\n .nextjs-data-copy-button--initial:hover {\n cursor: pointer;\n }\n .nextjs-data-copy-button--error,\n .nextjs-data-copy-button--error:hover {\n color: var(--color-ansi-red);\n }\n .nextjs-data-copy-button--success {\n color: var(--color-ansi-green);\n }\n";

View File

@@ -0,0 +1,242 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
COPY_BUTTON_STYLES: null,
CopyButton: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
COPY_BUTTON_STYLES: function() {
return COPY_BUTTON_STYLES;
},
CopyButton: function() {
return CopyButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _jsxruntime = require("react/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _cx = require("../../utils/cx");
function useCopyLegacy(content) {
// This would be simpler with useActionState but we need to support React 18 here.
// React 18 also doesn't have async transitions.
const [copyState, dispatch] = _react.useReducer((state, action)=>{
if (action.type === 'reset') {
return {
state: 'initial'
};
}
if (action.type === 'copied') {
return {
state: 'success'
};
}
if (action.type === 'copying') {
return {
state: 'pending'
};
}
if (action.type === 'error') {
return {
state: 'error',
error: action.error
};
}
return state;
}, {
state: 'initial'
});
function copy() {
if (isPending) {
return;
}
if (!navigator.clipboard) {
dispatch({
type: 'error',
error: Object.defineProperty(new Error('Copy to clipboard is not supported in this browser'), "__NEXT_ERROR_CODE", {
value: "E376",
enumerable: false,
configurable: true
})
});
} else {
dispatch({
type: 'copying'
});
navigator.clipboard.writeText(content).then(()=>{
dispatch({
type: 'copied'
});
}, (error)=>{
dispatch({
type: 'error',
error
});
});
}
}
const reset = _react.useCallback(()=>{
dispatch({
type: 'reset'
});
}, []);
const isPending = copyState.state === 'pending';
return [
copyState,
copy,
reset,
isPending
];
}
function useCopyModern(content) {
const [copyState, dispatch, isPending] = _react.useActionState((state, action)=>{
if (action === 'reset') {
return {
state: 'initial'
};
}
if (action === 'copy') {
if (!navigator.clipboard) {
return {
state: 'error',
error: Object.defineProperty(new Error('Copy to clipboard is not supported in this browser'), "__NEXT_ERROR_CODE", {
value: "E376",
enumerable: false,
configurable: true
})
};
}
return navigator.clipboard.writeText(content).then(()=>{
return {
state: 'success'
};
}, (error)=>{
return {
state: 'error',
error
};
});
}
return state;
}, {
state: 'initial'
});
function copy() {
_react.startTransition(()=>{
dispatch('copy');
});
}
const reset = _react.useCallback(()=>{
dispatch('reset');
}, [
// TODO: `dispatch` from `useActionState` is not reactive.
// Remove from dependencies once https://github.com/facebook/react/pull/29665 is released.
dispatch
]);
return [
copyState,
copy,
reset,
isPending
];
}
const useCopy = typeof _react.useActionState === 'function' ? useCopyModern : useCopyLegacy;
function CopyButton(param) {
let { actionLabel, successLabel, content, icon, disabled, ...props } = param;
const [copyState, copy, reset, isPending] = useCopy(content);
const error = copyState.state === 'error' ? copyState.error : null;
_react.useEffect(()=>{
if (error !== null) {
// Additional console.error to get the stack.
console.error(error);
}
}, [
error
]);
_react.useEffect(()=>{
if (copyState.state === 'success') {
const timeoutId = setTimeout(()=>{
reset();
}, 2000);
return ()=>{
clearTimeout(timeoutId);
};
}
}, [
isPending,
copyState.state,
reset
]);
const isDisabled = isPending || disabled;
const label = copyState.state === 'success' ? successLabel : actionLabel;
// Assign default icon
const renderedIcon = copyState.state === 'success' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(CopySuccessIcon, {}) : icon || /*#__PURE__*/ (0, _jsxruntime.jsx)(CopyIcon, {
width: 14,
height: 14,
className: "error-overlay-toolbar-button-icon"
});
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
...props,
type: "button",
title: label,
"aria-label": label,
"aria-disabled": isDisabled,
disabled: isDisabled,
"data-nextjs-copy-button": true,
className: (0, _cx.cx)(props.className, 'nextjs-data-copy-button', "nextjs-data-copy-button--" + copyState.state),
onClick: ()=>{
if (!isDisabled) {
copy();
}
},
children: [
renderedIcon,
copyState.state === 'error' ? " " + copyState.error : null
]
});
}
function CopyIcon(props) {
return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M2.406.438c-.845 0-1.531.685-1.531 1.53v6.563c0 .846.686 1.531 1.531 1.531H3.937V8.75H2.406a.219.219 0 0 1-.219-.219V1.97c0-.121.098-.219.22-.219h4.812c.12 0 .218.098.218.219v.656H8.75v-.656c0-.846-.686-1.532-1.531-1.532H2.406zm4.375 3.5c-.845 0-1.531.685-1.531 1.53v6.563c0 .846.686 1.531 1.531 1.531h4.813c.845 0 1.531-.685 1.531-1.53V5.468c0-.846-.686-1.532-1.531-1.532H6.78zm-.218 1.53c0-.12.097-.218.218-.218h4.813c.12 0 .219.098.219.219v6.562c0 .121-.098.219-.22.219H6.782a.219.219 0 0 1-.218-.219V5.47z",
fill: "currentColor"
})
});
}
function CopySuccessIcon() {
return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
height: "16",
xlinkTitle: "copied",
viewBox: "0 0 16 16",
width: "16",
stroke: "currentColor",
fill: "currentColor",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
d: "M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
})
});
}
const COPY_BUTTON_STYLES = "\n .nextjs-data-copy-button {\n color: inherit;\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n }\n .nextjs-data-copy-button--initial:hover {\n cursor: pointer;\n }\n .nextjs-data-copy-button--error,\n .nextjs-data-copy-button--error:hover {\n color: var(--color-ansi-red);\n }\n .nextjs-data-copy-button--success {\n color: var(--color-ansi-green);\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,7 @@
import * as React from 'react';
export type DialogBodyProps = {
children?: React.ReactNode;
className?: string;
};
declare const DialogBody: React.FC<DialogBodyProps>;
export { DialogBody };

View File

@@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DialogBody", {
enumerable: true,
get: function() {
return DialogBody;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _jsxruntime = require("react/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const DialogBody = function DialogBody(param) {
let { children, className } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
"data-nextjs-dialog-body": true,
className: className,
children: children
});
};
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=dialog-body.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/dialog/dialog-body.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport type DialogBodyProps = {\n children?: React.ReactNode\n className?: string\n}\n\nconst DialogBody: React.FC<DialogBodyProps> = function DialogBody({\n children,\n className,\n}) {\n return (\n <div data-nextjs-dialog-body className={className}>\n {children}\n </div>\n )\n}\n\nexport { DialogBody }\n"],"names":["DialogBody","children","className","div","data-nextjs-dialog-body"],"mappings":";;;;+BAkBSA;;;eAAAA;;;;;iEAlBc;AAOvB,MAAMA,aAAwC,SAASA,WAAW,KAGjE;IAHiE,IAAA,EAChEC,QAAQ,EACRC,SAAS,EACV,GAHiE;IAIhE,qBACE,qBAACC;QAAIC,yBAAuB;QAACF,WAAWA;kBACrCD;;AAGP"}

View File

@@ -0,0 +1,7 @@
import * as React from 'react';
export type DialogContentProps = {
children?: React.ReactNode;
className?: string;
};
declare const DialogContent: React.FC<DialogContentProps>;
export { DialogContent };

View File

@@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DialogContent", {
enumerable: true,
get: function() {
return DialogContent;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _jsxruntime = require("react/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const DialogContent = function DialogContent(param) {
let { children, className } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
"data-nextjs-dialog-content": true,
className: className,
children: children
});
};
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=dialog-content.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/dialog/dialog-content.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport type DialogContentProps = {\n children?: React.ReactNode\n className?: string\n}\n\nconst DialogContent: React.FC<DialogContentProps> = function DialogContent({\n children,\n className,\n}) {\n return (\n <div data-nextjs-dialog-content className={className}>\n {children}\n </div>\n )\n}\n\nexport { DialogContent }\n"],"names":["DialogContent","children","className","div","data-nextjs-dialog-content"],"mappings":";;;;+BAkBSA;;;eAAAA;;;;;iEAlBc;AAOvB,MAAMA,gBAA8C,SAASA,cAAc,KAG1E;IAH0E,IAAA,EACzEC,QAAQ,EACRC,SAAS,EACV,GAH0E;IAIzE,qBACE,qBAACC;QAAIC,4BAA0B;QAACF,WAAWA;kBACxCD;;AAGP"}

View File

@@ -0,0 +1,5 @@
export type DialogFooterProps = {
children?: React.ReactNode;
className?: string;
};
export declare function DialogFooter({ children, className }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DialogFooter", {
enumerable: true,
get: function() {
return DialogFooter;
}
});
const _jsxruntime = require("react/jsx-runtime");
function DialogFooter(param) {
let { children, className } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
"data-nextjs-dialog-footer": true,
className: className,
children: children
});
}
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=dialog-footer.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/dialog/dialog-footer.tsx"],"sourcesContent":["export type DialogFooterProps = {\n children?: React.ReactNode\n className?: string\n}\n\nexport function DialogFooter({ children, className }: DialogFooterProps) {\n return (\n <div data-nextjs-dialog-footer className={className}>\n {children}\n </div>\n )\n}\n"],"names":["DialogFooter","children","className","div","data-nextjs-dialog-footer"],"mappings":";;;;+BAKgBA;;;eAAAA;;;;AAAT,SAASA,aAAa,KAA0C;IAA1C,IAAA,EAAEC,QAAQ,EAAEC,SAAS,EAAqB,GAA1C;IAC3B,qBACE,qBAACC;QAAIC,2BAAyB;QAACF,WAAWA;kBACvCD;;AAGP"}

View File

@@ -0,0 +1,7 @@
import * as React from 'react';
export type DialogHeaderProps = {
children?: React.ReactNode;
className?: string;
};
declare const DialogHeader: React.FC<DialogHeaderProps>;
export { DialogHeader };

View File

@@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DialogHeader", {
enumerable: true,
get: function() {
return DialogHeader;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _jsxruntime = require("react/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const DialogHeader = function DialogHeader(param) {
let { children, className } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
"data-nextjs-dialog-header": true,
className: className,
children: children
});
};
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=dialog-header.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/dialog/dialog-header.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport type DialogHeaderProps = {\n children?: React.ReactNode\n className?: string\n}\n\nconst DialogHeader: React.FC<DialogHeaderProps> = function DialogHeader({\n children,\n className,\n}) {\n return (\n <div data-nextjs-dialog-header className={className}>\n {children}\n </div>\n )\n}\n\nexport { DialogHeader }\n"],"names":["DialogHeader","children","className","div","data-nextjs-dialog-header"],"mappings":";;;;+BAkBSA;;;eAAAA;;;;;iEAlBc;AAOvB,MAAMA,eAA4C,SAASA,aAAa,KAGvE;IAHuE,IAAA,EACtEC,QAAQ,EACRC,SAAS,EACV,GAHuE;IAItE,qBACE,qBAACC;QAAIC,2BAAyB;QAACF,WAAWA;kBACvCD;;AAGP"}

View File

@@ -0,0 +1,12 @@
import * as React from 'react';
export type DialogProps = {
children?: React.ReactNode;
type: 'error' | 'warning';
'aria-labelledby': string;
'aria-describedby': string;
className?: string;
onClose?: () => void;
dialogResizerRef?: React.RefObject<HTMLDivElement | null>;
};
declare const Dialog: React.FC<DialogProps>;
export { Dialog };

View File

@@ -0,0 +1,101 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Dialog", {
enumerable: true,
get: function() {
return Dialog;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _jsxruntime = require("react/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useonclickoutside = require("../../hooks/use-on-click-outside");
const _usemeasureheight = require("../../hooks/use-measure-height");
const CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE = [
'[data-next-mark]',
'[data-issues-open]',
'#nextjs-dev-tools-menu',
'[data-nextjs-error-overlay-nav]',
'[data-info-popover]'
];
const Dialog = function Dialog(param) {
let { children, type, className, onClose, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, dialogResizerRef, ...props } = param;
const dialogRef = _react.useRef(null);
const [role, setRole] = _react.useState(typeof document !== 'undefined' && document.hasFocus() ? 'dialog' : undefined);
const ref = _react.useRef(null);
const [height, pristine] = (0, _usemeasureheight.useMeasureHeight)(ref);
(0, _useonclickoutside.useOnClickOutside)(dialogRef.current, CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE, (e)=>{
e.preventDefault();
return onClose == null ? void 0 : onClose();
});
_react.useEffect(()=>{
if (dialogRef.current == null) {
return;
}
function handleFocus() {
// safari will force itself as the active application when a background page triggers any sort of autofocus
// this is a workaround to only set the dialog role if the document has focus
setRole(document.hasFocus() ? 'dialog' : undefined);
}
window.addEventListener('focus', handleFocus);
window.addEventListener('blur', handleFocus);
return ()=>{
window.removeEventListener('focus', handleFocus);
window.removeEventListener('blur', handleFocus);
};
}, []);
_react.useEffect(()=>{
const dialog = dialogRef.current;
const root = dialog == null ? void 0 : dialog.getRootNode();
const initialActiveElement = root instanceof ShadowRoot ? root == null ? void 0 : root.activeElement : null;
// Trap focus within the dialog
dialog == null ? void 0 : dialog.focus();
return ()=>{
// Blur first to avoid getting stuck, in case `activeElement` is missing
dialog == null ? void 0 : dialog.blur();
// Restore focus to the previously active element
initialActiveElement == null ? void 0 : initialActiveElement.focus();
};
}, []);
return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
ref: dialogRef,
tabIndex: -1,
"data-nextjs-dialog": true,
role: role,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": ariaDescribedBy,
"aria-modal": "true",
className: className,
onKeyDown: (e)=>{
if (e.key === 'Escape') {
onClose == null ? void 0 : onClose();
}
},
...props,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
ref: dialogResizerRef,
"data-nextjs-dialog-sizer": true,
// [x] Don't animate on initial load
// [x] No duplicate elements
// [x] Responds to content growth
style: {
height,
transition: pristine ? undefined : 'height 250ms var(--timing-swift)'
},
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
ref: ref,
children: children
})
})
});
};
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=dialog.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,6 @@
export { Dialog } from './dialog';
export { DialogBody } from './dialog-body';
export { DialogContent } from './dialog-content';
export { DialogHeader } from './dialog-header';
export { DialogFooter } from './dialog-footer';
export { styles } from './styles';

View File

@@ -0,0 +1,52 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
Dialog: null,
DialogBody: null,
DialogContent: null,
DialogFooter: null,
DialogHeader: null,
styles: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Dialog: function() {
return _dialog.Dialog;
},
DialogBody: function() {
return _dialogbody.DialogBody;
},
DialogContent: function() {
return _dialogcontent.DialogContent;
},
DialogFooter: function() {
return _dialogfooter.DialogFooter;
},
DialogHeader: function() {
return _dialogheader.DialogHeader;
},
styles: function() {
return _styles.styles;
}
});
const _dialog = require("./dialog");
const _dialogbody = require("./dialog-body");
const _dialogcontent = require("./dialog-content");
const _dialogheader = require("./dialog-header");
const _dialogfooter = require("./dialog-footer");
const _styles = require("./styles");
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/dialog/index.ts"],"sourcesContent":["export { Dialog } from './dialog'\nexport { DialogBody } from './dialog-body'\nexport { DialogContent } from './dialog-content'\nexport { DialogHeader } from './dialog-header'\nexport { DialogFooter } from './dialog-footer'\nexport { styles } from './styles'\n"],"names":["Dialog","DialogBody","DialogContent","DialogFooter","DialogHeader","styles"],"mappings":";;;;;;;;;;;;;;;;;;;IAASA,MAAM;eAANA,cAAM;;IACNC,UAAU;eAAVA,sBAAU;;IACVC,aAAa;eAAbA,4BAAa;;IAEbC,YAAY;eAAZA,0BAAY;;IADZC,YAAY;eAAZA,0BAAY;;IAEZC,MAAM;eAANA,cAAM;;;wBALQ;4BACI;+BACG;8BACD;8BACA;wBACN"}

View File

@@ -0,0 +1,2 @@
declare const styles = "\n [data-nextjs-dialog-root] {\n --next-dialog-radius: var(--rounded-xl);\n --next-dialog-footer-height: var(--size-48);\n --next-dialog-max-width: 960px;\n --next-dialog-row-padding: 16px;\n --next-dialog-container-padding: 12px;\n\n display: flex;\n flex-direction: column-reverse;\n width: 100%;\n max-height: calc(100% - 56px);\n max-width: var(--next-dialog-max-width);\n margin-right: auto;\n margin-left: auto;\n scale: 0.98;\n opacity: 0;\n transition-property: scale, opacity;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--timing-overlay);\n\n &[data-rendered='true'] {\n opacity: 1;\n scale: 1;\n }\n }\n\n [data-nextjs-dialog] {\n outline: none;\n overflow: hidden;\n }\n [data-nextjs-dialog]::-webkit-scrollbar {\n width: 6px;\n border-radius: 0 0 1rem 1rem;\n margin-bottom: 1rem;\n }\n [data-nextjs-dialog]::-webkit-scrollbar-button {\n display: none;\n }\n [data-nextjs-dialog]::-webkit-scrollbar-track {\n border-radius: 0 0 1rem 1rem;\n background-color: var(--color-background-100);\n }\n [data-nextjs-dialog]::-webkit-scrollbar-thumb {\n border-radius: 1rem;\n background-color: var(--color-gray-500);\n }\n\n \n [data-nextjs-dialog-sizer] {\n overflow: hidden;\n border-radius: inherit;\n }\n\n [data-nextjs-dialog-backdrop] {\n opacity: 0;\n transition: opacity var(--transition-duration) var(--timing-overlay);\n }\n\n [data-nextjs-dialog-overlay][data-rendered='true']\n [data-nextjs-dialog-backdrop] {\n opacity: 1;\n }\n\n [data-nextjs-dialog-content] {\n overflow-y: auto;\n border: none;\n margin: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n padding: 16px 12px;\n }\n\n /* Account for the footer height, when present */\n [data-nextjs-dialog][data-has-footer='true'] [data-nextjs-dialog-body] {\n margin-bottom: var(--next-dialog-footer-height);\n }\n\n [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {\n flex-shrink: 0;\n margin-bottom: 8px;\n }\n\n [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {\n position: relative;\n flex: 1 1 auto;\n }\n\n [data-nextjs-dialog-footer] {\n /* Subtract border width */\n width: calc(100% - 2px);\n /* \n We make this element fixed to anchor it to the bottom during the height transition.\n If you make this relative it will jump during the transition and not collapse or expand smoothly.\n If you make this absolute it will remain stuck at its initial position when scrolling the dialog.\n */\n position: fixed;\n bottom: 1px;\n min-height: var(--next-dialog-footer-height);\n border-radius: 0 0 var(--next-dialog-radius) var(--next-dialog-radius);\n overflow: hidden;\n\n > * {\n min-height: var(--next-dialog-footer-height);\n }\n }\n\n @media (max-height: 812px) {\n [data-nextjs-dialog-overlay] {\n max-height: calc(100% - 15px);\n }\n }\n\n @media (min-width: 576px) {\n [data-nextjs-dialog-root] {\n --next-dialog-max-width: 540px;\n }\n }\n\n @media (min-width: 768px) {\n [data-nextjs-dialog-root] {\n --next-dialog-max-width: 720px;\n }\n }\n\n @media (min-width: 992px) {\n [data-nextjs-dialog-root] {\n --next-dialog-max-width: 960px;\n }\n }\n";
export { styles };

View File

@@ -0,0 +1,19 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "styles", {
enumerable: true,
get: function() {
return styles;
}
});
const styles = "\n [data-nextjs-dialog-root] {\n --next-dialog-radius: var(--rounded-xl);\n --next-dialog-footer-height: var(--size-48);\n --next-dialog-max-width: 960px;\n --next-dialog-row-padding: 16px;\n --next-dialog-container-padding: 12px;\n\n display: flex;\n flex-direction: column-reverse;\n width: 100%;\n max-height: calc(100% - 56px);\n max-width: var(--next-dialog-max-width);\n margin-right: auto;\n margin-left: auto;\n scale: 0.98;\n opacity: 0;\n transition-property: scale, opacity;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--timing-overlay);\n\n &[data-rendered='true'] {\n opacity: 1;\n scale: 1;\n }\n }\n\n [data-nextjs-dialog] {\n outline: none;\n overflow: hidden;\n }\n [data-nextjs-dialog]::-webkit-scrollbar {\n width: 6px;\n border-radius: 0 0 1rem 1rem;\n margin-bottom: 1rem;\n }\n [data-nextjs-dialog]::-webkit-scrollbar-button {\n display: none;\n }\n [data-nextjs-dialog]::-webkit-scrollbar-track {\n border-radius: 0 0 1rem 1rem;\n background-color: var(--color-background-100);\n }\n [data-nextjs-dialog]::-webkit-scrollbar-thumb {\n border-radius: 1rem;\n background-color: var(--color-gray-500);\n }\n\n \n [data-nextjs-dialog-sizer] {\n overflow: hidden;\n border-radius: inherit;\n }\n\n [data-nextjs-dialog-backdrop] {\n opacity: 0;\n transition: opacity var(--transition-duration) var(--timing-overlay);\n }\n\n [data-nextjs-dialog-overlay][data-rendered='true']\n [data-nextjs-dialog-backdrop] {\n opacity: 1;\n }\n\n [data-nextjs-dialog-content] {\n overflow-y: auto;\n border: none;\n margin: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n padding: 16px 12px;\n }\n\n /* Account for the footer height, when present */\n [data-nextjs-dialog][data-has-footer='true'] [data-nextjs-dialog-body] {\n margin-bottom: var(--next-dialog-footer-height);\n }\n\n [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {\n flex-shrink: 0;\n margin-bottom: 8px;\n }\n\n [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {\n position: relative;\n flex: 1 1 auto;\n }\n\n [data-nextjs-dialog-footer] {\n /* Subtract border width */\n width: calc(100% - 2px);\n /* \n We make this element fixed to anchor it to the bottom during the height transition.\n If you make this relative it will jump during the transition and not collapse or expand smoothly.\n If you make this absolute it will remain stuck at its initial position when scrolling the dialog.\n */\n position: fixed;\n bottom: 1px;\n min-height: var(--next-dialog-footer-height);\n border-radius: 0 0 var(--next-dialog-radius) var(--next-dialog-radius);\n overflow: hidden;\n\n > * {\n min-height: var(--next-dialog-footer-height);\n }\n }\n\n @media (max-height: 812px) {\n [data-nextjs-dialog-overlay] {\n max-height: calc(100% - 15px);\n }\n }\n\n @media (min-width: 576px) {\n [data-nextjs-dialog-root] {\n --next-dialog-max-width: 540px;\n }\n }\n\n @media (min-width: 768px) {\n [data-nextjs-dialog-root] {\n --next-dialog-max-width: 720px;\n }\n }\n\n @media (min-width: 992px) {\n [data-nextjs-dialog-root] {\n --next-dialog-max-width: 960px;\n }\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=styles.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/dialog/styles.ts"],"sourcesContent":["const styles = `\n [data-nextjs-dialog-root] {\n --next-dialog-radius: var(--rounded-xl);\n --next-dialog-footer-height: var(--size-48);\n --next-dialog-max-width: 960px;\n --next-dialog-row-padding: 16px;\n --next-dialog-container-padding: 12px;\n\n display: flex;\n flex-direction: column-reverse;\n width: 100%;\n max-height: calc(100% - 56px);\n max-width: var(--next-dialog-max-width);\n margin-right: auto;\n margin-left: auto;\n scale: 0.98;\n opacity: 0;\n transition-property: scale, opacity;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--timing-overlay);\n\n &[data-rendered='true'] {\n opacity: 1;\n scale: 1;\n }\n }\n\n [data-nextjs-dialog] {\n outline: none;\n overflow: hidden;\n }\n [data-nextjs-dialog]::-webkit-scrollbar {\n width: 6px;\n border-radius: 0 0 1rem 1rem;\n margin-bottom: 1rem;\n }\n [data-nextjs-dialog]::-webkit-scrollbar-button {\n display: none;\n }\n [data-nextjs-dialog]::-webkit-scrollbar-track {\n border-radius: 0 0 1rem 1rem;\n background-color: var(--color-background-100);\n }\n [data-nextjs-dialog]::-webkit-scrollbar-thumb {\n border-radius: 1rem;\n background-color: var(--color-gray-500);\n }\n\n ${\n '' /* Place overflow: hidden on this so we can break out from [data-nextjs-dialog] */\n }\n [data-nextjs-dialog-sizer] {\n overflow: hidden;\n border-radius: inherit;\n }\n\n [data-nextjs-dialog-backdrop] {\n opacity: 0;\n transition: opacity var(--transition-duration) var(--timing-overlay);\n }\n\n [data-nextjs-dialog-overlay][data-rendered='true']\n [data-nextjs-dialog-backdrop] {\n opacity: 1;\n }\n\n [data-nextjs-dialog-content] {\n overflow-y: auto;\n border: none;\n margin: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n padding: 16px 12px;\n }\n\n /* Account for the footer height, when present */\n [data-nextjs-dialog][data-has-footer='true'] [data-nextjs-dialog-body] {\n margin-bottom: var(--next-dialog-footer-height);\n }\n\n [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {\n flex-shrink: 0;\n margin-bottom: 8px;\n }\n\n [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {\n position: relative;\n flex: 1 1 auto;\n }\n\n [data-nextjs-dialog-footer] {\n /* Subtract border width */\n width: calc(100% - 2px);\n /* \n We make this element fixed to anchor it to the bottom during the height transition.\n If you make this relative it will jump during the transition and not collapse or expand smoothly.\n If you make this absolute it will remain stuck at its initial position when scrolling the dialog.\n */\n position: fixed;\n bottom: 1px;\n min-height: var(--next-dialog-footer-height);\n border-radius: 0 0 var(--next-dialog-radius) var(--next-dialog-radius);\n overflow: hidden;\n\n > * {\n min-height: var(--next-dialog-footer-height);\n }\n }\n\n @media (max-height: 812px) {\n [data-nextjs-dialog-overlay] {\n max-height: calc(100% - 15px);\n }\n }\n\n @media (min-width: 576px) {\n [data-nextjs-dialog-root] {\n --next-dialog-max-width: 540px;\n }\n }\n\n @media (min-width: 768px) {\n [data-nextjs-dialog-root] {\n --next-dialog-max-width: 720px;\n }\n }\n\n @media (min-width: 992px) {\n [data-nextjs-dialog-root] {\n --next-dialog-max-width: 960px;\n }\n }\n`\n\nexport { styles }\n"],"names":["styles"],"mappings":";;;;+BAuISA;;;eAAAA;;;AAvIT,MAAMA,SAAU"}

View File

@@ -0,0 +1,8 @@
import type { OriginalStackFrame } from '../../../../utils/stack-frame';
interface CallStackProps {
frames: OriginalStackFrame[];
dialogResizerRef: React.RefObject<HTMLDivElement | null>;
}
export declare function CallStack({ frames, dialogResizerRef }: CallStackProps): import("react/jsx-runtime").JSX.Element;
export declare const CALL_STACK_STYLES = "\n .error-overlay-call-stack-container {\n position: relative;\n margin-top: 8px;\n }\n\n .error-overlay-call-stack-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n min-height: var(--size-28);\n padding: 8px 8px 12px 4px;\n width: 100%;\n }\n\n .error-overlay-call-stack-title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n\n margin: 0;\n\n color: var(--color-gray-1000);\n font-size: var(--size-16);\n font-weight: 500;\n }\n\n .error-overlay-call-stack-count {\n display: flex;\n justify-content: center;\n align-items: center;\n\n width: var(--size-20);\n height: var(--size-20);\n gap: 4px;\n\n color: var(--color-gray-1000);\n text-align: center;\n font-size: var(--size-11);\n font-weight: 500;\n line-height: var(--size-16);\n\n border-radius: var(--rounded-full);\n background: var(--color-gray-300);\n }\n\n .error-overlay-call-stack-ignored-list-toggle-button {\n all: unset;\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--color-gray-900);\n font-size: var(--size-14);\n line-height: var(--size-20);\n border-radius: 6px;\n padding: 4px 6px;\n margin-right: -6px;\n transition: background 150ms ease;\n\n &:hover {\n background: var(--color-gray-100);\n }\n\n &:focus {\n outline: var(--focus-ring);\n }\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n }\n";
export {};

View File

@@ -0,0 +1,114 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
CALL_STACK_STYLES: null,
CallStack: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CALL_STACK_STYLES: function() {
return CALL_STACK_STYLES;
},
CallStack: function() {
return CallStack;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _callstackframe = require("../../call-stack-frame/call-stack-frame");
function CallStack(param) {
let { frames, dialogResizerRef } = param;
const initialDialogHeight = (0, _react.useRef)(NaN);
const [isIgnoreListOpen, setIsIgnoreListOpen] = (0, _react.useState)(false);
const ignoredFramesTally = (0, _react.useMemo)(()=>{
return frames.reduce((tally, frame)=>tally + (frame.ignored ? 1 : 0), 0);
}, [
frames
]);
function onToggleIgnoreList() {
const dialog = dialogResizerRef == null ? void 0 : dialogResizerRef.current;
if (!dialog) {
return;
}
const { height: currentHeight } = dialog == null ? void 0 : dialog.getBoundingClientRect();
if (!initialDialogHeight.current) {
initialDialogHeight.current = currentHeight;
}
if (isIgnoreListOpen) {
function onTransitionEnd() {
dialog.removeEventListener('transitionend', onTransitionEnd);
setIsIgnoreListOpen(false);
}
dialog.style.height = "" + initialDialogHeight.current + "px";
dialog.addEventListener('transitionend', onTransitionEnd);
} else {
setIsIgnoreListOpen(true);
}
}
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "error-overlay-call-stack-container",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "error-overlay-call-stack-header",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
className: "error-overlay-call-stack-title",
children: [
"Call Stack",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "error-overlay-call-stack-count",
children: frames.length
})
]
}),
ignoredFramesTally > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
"data-expand-ignore-button": isIgnoreListOpen,
className: "error-overlay-call-stack-ignored-list-toggle-button",
onClick: onToggleIgnoreList,
children: [
(isIgnoreListOpen ? 'Hide' : 'Show') + " " + ignoredFramesTally + " ignore-listed frame(s)",
/*#__PURE__*/ (0, _jsxruntime.jsx)(ChevronUpDown, {})
]
})
]
}),
frames.map((frame, frameIndex)=>{
return !frame.ignored || isIgnoreListOpen ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_callstackframe.CallStackFrame, {
frame: frame
}, frameIndex) : null;
})
]
});
}
function ChevronUpDown() {
return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M8.70722 2.39641C8.3167 2.00588 7.68353 2.00588 7.29301 2.39641L4.46978 5.21963L3.93945 5.74996L5.00011 6.81062L5.53044 6.28029L8.00011 3.81062L10.4698 6.28029L11.0001 6.81062L12.0608 5.74996L11.5304 5.21963L8.70722 2.39641ZM5.53044 9.71963L5.00011 9.1893L3.93945 10.25L4.46978 10.7803L7.29301 13.6035C7.68353 13.994 8.3167 13.994 8.70722 13.6035L11.5304 10.7803L12.0608 10.25L11.0001 9.1893L10.4698 9.71963L8.00011 12.1893L5.53044 9.71963Z",
fill: "currentColor"
})
});
}
const CALL_STACK_STYLES = "\n .error-overlay-call-stack-container {\n position: relative;\n margin-top: 8px;\n }\n\n .error-overlay-call-stack-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n min-height: var(--size-28);\n padding: 8px 8px 12px 4px;\n width: 100%;\n }\n\n .error-overlay-call-stack-title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n\n margin: 0;\n\n color: var(--color-gray-1000);\n font-size: var(--size-16);\n font-weight: 500;\n }\n\n .error-overlay-call-stack-count {\n display: flex;\n justify-content: center;\n align-items: center;\n\n width: var(--size-20);\n height: var(--size-20);\n gap: 4px;\n\n color: var(--color-gray-1000);\n text-align: center;\n font-size: var(--size-11);\n font-weight: 500;\n line-height: var(--size-16);\n\n border-radius: var(--rounded-full);\n background: var(--color-gray-300);\n }\n\n .error-overlay-call-stack-ignored-list-toggle-button {\n all: unset;\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--color-gray-900);\n font-size: var(--size-14);\n line-height: var(--size-20);\n border-radius: 6px;\n padding: 4px 6px;\n margin-right: -6px;\n transition: background 150ms ease;\n\n &:hover {\n background: var(--color-gray-100);\n }\n\n &:focus {\n outline: var(--focus-ring);\n }\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=call-stack.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,18 @@
import { type OverlayState } from '../../../../shared';
declare const INDICATOR_POSITION: "top-left" | "top-right" | "bottom-left" | "bottom-right";
export type DevToolsIndicatorPosition = typeof INDICATOR_POSITION;
export declare function DevToolsIndicator({ state, errorCount, isBuildError, setIsErrorOverlayOpen, }: {
state: OverlayState;
errorCount: number;
isBuildError: boolean;
setIsErrorOverlayOpen: (isErrorOverlayOpen: boolean | ((prev: boolean) => boolean)) => void;
}): import("react/jsx-runtime").JSX.Element;
declare const OVERLAYS: {
readonly Root: "root";
readonly Turbo: "turbo";
readonly Route: "route";
readonly Preferences: "preferences";
};
export type Overlays = (typeof OVERLAYS)[keyof typeof OVERLAYS];
export declare const DEV_TOOLS_INDICATOR_STYLES = "\n .dev-tools-indicator-menu {\n -webkit-font-smoothing: antialiased;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n background-clip: padding-box;\n box-shadow: var(--shadow-menu);\n border-radius: var(--rounded-xl);\n position: absolute;\n font-family: var(--font-stack-sans);\n z-index: 1000;\n overflow: hidden;\n opacity: 0;\n outline: 0;\n min-width: 248px;\n transition: opacity var(--animate-out-duration-ms)\n var(--animate-out-timing-function);\n\n &[data-rendered='true'] {\n opacity: 1;\n scale: 1;\n }\n }\n\n .dev-tools-indicator-inner {\n padding: 6px;\n width: 100%;\n }\n\n .dev-tools-indicator-item {\n display: flex;\n align-items: center;\n padding: 8px 6px;\n height: var(--size-36);\n border-radius: 6px;\n text-decoration: none !important;\n user-select: none;\n white-space: nowrap;\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n\n &:focus-visible {\n outline: 0;\n }\n }\n\n .dev-tools-indicator-footer {\n background: var(--color-background-200);\n padding: 6px;\n border-top: 1px solid var(--color-gray-400);\n width: 100%;\n }\n\n .dev-tools-indicator-item[data-selected='true'] {\n cursor: pointer;\n background-color: var(--color-gray-200);\n }\n\n .dev-tools-indicator-label {\n font-size: var(--size-14);\n line-height: var(--size-20);\n color: var(--color-gray-1000);\n }\n\n .dev-tools-indicator-value {\n font-size: var(--size-14);\n line-height: var(--size-20);\n color: var(--color-gray-900);\n margin-left: auto;\n }\n\n .dev-tools-indicator-issue-count {\n --color-primary: var(--color-gray-800);\n --color-secondary: var(--color-gray-100);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-width: var(--size-40);\n height: var(--size-24);\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n background-clip: padding-box;\n box-shadow: var(--shadow-small);\n padding: 2px;\n color: var(--color-gray-1000);\n border-radius: 128px;\n font-weight: 500;\n font-size: var(--size-13);\n font-variant-numeric: tabular-nums;\n\n &[data-has-issues='true'] {\n --color-primary: var(--color-red-800);\n --color-secondary: var(--color-red-100);\n }\n\n .dev-tools-indicator-issue-count-indicator {\n width: var(--size-8);\n height: var(--size-8);\n background: var(--color-primary);\n box-shadow: 0 0 0 2px var(--color-secondary);\n border-radius: 50%;\n }\n }\n\n .dev-tools-indicator-shortcut {\n display: flex;\n gap: 4px;\n\n kbd {\n width: var(--size-20);\n height: var(--size-20);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--rounded-md);\n border: 1px solid var(--color-gray-400);\n font-family: var(--font-stack-sans);\n background: var(--color-background-100);\n color: var(--color-gray-1000);\n text-align: center;\n font-size: var(--size-12);\n line-height: var(--size-16);\n }\n }\n";
export {};

View File

@@ -0,0 +1,401 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
DEV_TOOLS_INDICATOR_STYLES: null,
DevToolsIndicator: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DEV_TOOLS_INDICATOR_STYLES: function() {
return DEV_TOOLS_INDICATOR_STYLES;
},
DevToolsIndicator: function() {
return DevToolsIndicator;
}
});
const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
const _jsxruntime = require("react/jsx-runtime");
const _shared = require("../../../../shared");
const _react = require("react");
const _toast = require("../../toast");
const _nextlogo = require("./next-logo");
const _initialize = require("../../../../../../dev/dev-build-indicator/internal/initialize");
const _devrenderindicator = require("../../../../utils/dev-indicator/dev-render-indicator");
const _usedelayedrender = require("../../../hooks/use-delayed-render");
const _turbopackinfo = require("./dev-tools-info/turbopack-info");
const _routeinfo = require("./dev-tools-info/route-info");
const _gearicon = /*#__PURE__*/ _interop_require_default._(require("../../../icons/gear-icon"));
const _userpreferences = require("./dev-tools-info/user-preferences");
const _utils = require("./utils");
// TODO: add E2E tests to cover different scenarios
const INDICATOR_POSITION = process.env.__NEXT_DEV_INDICATOR_POSITION || 'bottom-left';
function DevToolsIndicator(param) {
let { state, errorCount, isBuildError, setIsErrorOverlayOpen } = param;
const [isDevToolsIndicatorVisible, setIsDevToolsIndicatorVisible] = (0, _react.useState)(true);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(DevToolsPopover, {
routerType: state.routerType,
semver: state.versionInfo.installed,
issueCount: errorCount,
isStaticRoute: state.staticIndicator,
hide: ()=>{
setIsDevToolsIndicatorVisible(false);
fetch('/__nextjs_disable_dev_indicator', {
method: 'POST'
});
},
setIsErrorOverlayOpen: setIsErrorOverlayOpen,
isTurbopack: !!process.env.TURBOPACK,
disabled: state.disableDevIndicator || !isDevToolsIndicatorVisible,
isBuildError: isBuildError
});
}
const Context = /*#__PURE__*/ (0, _react.createContext)({});
function getInitialPosition() {
if (typeof localStorage !== 'undefined' && localStorage.getItem(_shared.STORAGE_KEY_POSITION)) {
return localStorage.getItem(_shared.STORAGE_KEY_POSITION);
}
return INDICATOR_POSITION;
}
const OVERLAYS = {
Root: 'root',
Turbo: 'turbo',
Route: 'route',
Preferences: 'preferences'
};
function DevToolsPopover(param) {
let { routerType, disabled, issueCount, isStaticRoute, isTurbopack, isBuildError, hide, setIsErrorOverlayOpen } = param;
const menuRef = (0, _react.useRef)(null);
const triggerRef = (0, _react.useRef)(null);
const [open, setOpen] = (0, _react.useState)(null);
const [position, setPosition] = (0, _react.useState)(getInitialPosition());
const [selectedIndex, setSelectedIndex] = (0, _react.useState)(-1);
const isMenuOpen = open === OVERLAYS.Root;
const isTurbopackInfoOpen = open === OVERLAYS.Turbo;
const isRouteInfoOpen = open === OVERLAYS.Route;
const isPreferencesOpen = open === OVERLAYS.Preferences;
const { mounted: menuMounted, rendered: menuRendered } = (0, _usedelayedrender.useDelayedRender)(isMenuOpen, {
// Intentionally no fade in, makes the UI feel more immediate
enterDelay: 0,
// Graceful fade out to confirm that the UI did not break
exitDelay: _utils.MENU_DURATION_MS
});
// Features to make the menu accessible
(0, _utils.useFocusTrap)(menuRef, triggerRef, isMenuOpen);
(0, _utils.useClickOutside)(menuRef, triggerRef, isMenuOpen, closeMenu);
(0, _react.useEffect)(()=>{
if (open === null) {
// Avoid flashing selected state
const id = setTimeout(()=>{
setSelectedIndex(-1);
}, _utils.MENU_DURATION_MS);
return ()=>clearTimeout(id);
}
}, [
open
]);
function select(index) {
var _menuRef_current;
if (index === 'first') {
setTimeout(()=>{
var _menuRef_current;
const all = (_menuRef_current = menuRef.current) == null ? void 0 : _menuRef_current.querySelectorAll('[role="menuitem"]');
if (all) {
const firstIndex = all[0].getAttribute('data-index');
select(Number(firstIndex));
}
});
return;
}
if (index === 'last') {
setTimeout(()=>{
var _menuRef_current;
const all = (_menuRef_current = menuRef.current) == null ? void 0 : _menuRef_current.querySelectorAll('[role="menuitem"]');
if (all) {
const lastIndex = all.length - 1;
select(lastIndex);
}
});
return;
}
const el = (_menuRef_current = menuRef.current) == null ? void 0 : _menuRef_current.querySelector('[data-index="' + index + '"]');
if (el) {
setSelectedIndex(index);
el == null ? void 0 : el.focus();
}
}
function onMenuKeydown(e) {
e.preventDefault();
switch(e.key){
case 'ArrowDown':
const next = selectedIndex + 1;
select(next);
break;
case 'ArrowUp':
const prev = selectedIndex - 1;
select(prev);
break;
case 'Home':
select('first');
break;
case 'End':
select('last');
break;
default:
break;
}
}
function openErrorOverlay() {
setOpen(null);
if (issueCount > 0) {
setIsErrorOverlayOpen(true);
}
}
function toggleErrorOverlay() {
setIsErrorOverlayOpen((prev)=>!prev);
}
function openRootMenu() {
setOpen((prevOpen)=>{
if (prevOpen === null) select('first');
return OVERLAYS.Root;
});
}
function onTriggerClick() {
if (open === OVERLAYS.Root) {
setOpen(null);
} else {
openRootMenu();
setTimeout(()=>{
select('first');
});
}
}
function closeMenu() {
// Only close when we were on `Root`,
// otherwise it will close other overlays
setOpen((prevOpen)=>{
if (prevOpen === OVERLAYS.Root) {
return null;
}
return prevOpen;
});
}
function handleHideDevtools() {
setOpen(null);
hide();
}
const [vertical, horizontal] = position.split('-', 2);
const popover = {
[vertical]: 'calc(100% + 8px)',
[horizontal]: 0
};
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_toast.Toast, {
"data-nextjs-toast": true,
style: {
'--animate-out-duration-ms': "" + _utils.MENU_DURATION_MS + "ms",
'--animate-out-timing-function': _utils.MENU_CURVE,
boxShadow: 'none',
zIndex: 2147483647,
// Reset the toast component's default positions.
bottom: 'initial',
left: 'initial',
[vertical]: '20px',
[horizontal]: '20px'
},
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_nextlogo.NextLogo, {
ref: triggerRef,
"aria-haspopup": "menu",
"aria-expanded": isMenuOpen,
"aria-controls": "nextjs-dev-tools-menu",
"aria-label": "" + (isMenuOpen ? 'Close' : 'Open') + " Next.js Dev Tools",
"data-nextjs-dev-tools-button": true,
disabled: disabled,
issueCount: issueCount,
onTriggerClick: onTriggerClick,
toggleErrorOverlay: toggleErrorOverlay,
isDevBuilding: (0, _initialize.useIsDevBuilding)(),
isDevRendering: (0, _devrenderindicator.useIsDevRendering)(),
isBuildError: isBuildError
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_routeinfo.RouteInfo, {
isOpen: isRouteInfoOpen,
close: openRootMenu,
triggerRef: triggerRef,
style: popover,
routerType: routerType,
routeType: isStaticRoute ? 'Static' : 'Dynamic'
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_turbopackinfo.TurbopackInfo, {
isOpen: isTurbopackInfoOpen,
close: openRootMenu,
triggerRef: triggerRef,
style: popover
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_userpreferences.UserPreferences, {
isOpen: isPreferencesOpen,
close: openRootMenu,
triggerRef: triggerRef,
style: popover,
hide: handleHideDevtools,
setPosition: setPosition,
position: position
}),
menuMounted && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
ref: menuRef,
id: "nextjs-dev-tools-menu",
role: "menu",
dir: "ltr",
"aria-orientation": "vertical",
"aria-label": "Next.js Dev Tools Items",
tabIndex: -1,
className: "dev-tools-indicator-menu",
onKeyDown: onMenuKeydown,
"data-rendered": menuRendered,
style: popover,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(Context.Provider, {
value: {
closeMenu,
selectedIndex,
setSelectedIndex
},
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "dev-tools-indicator-inner",
children: [
issueCount > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
title: issueCount + " " + (issueCount === 1 ? 'issue' : 'issues') + " found. Click to view details in the dev overlay.",
index: 0,
label: "Issues",
value: /*#__PURE__*/ (0, _jsxruntime.jsx)(IssueCount, {
children: issueCount
}),
onClick: openErrorOverlay
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
title: "Current route is " + (isStaticRoute ? 'static' : 'dynamic') + ".",
label: "Route",
index: 1,
value: isStaticRoute ? 'Static' : 'Dynamic',
onClick: ()=>setOpen(OVERLAYS.Route),
"data-nextjs-route-type": isStaticRoute ? 'static' : 'dynamic'
}),
isTurbopack ? /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
title: "Turbopack is enabled.",
label: "Turbopack",
value: "Enabled"
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
index: 2,
title: "Learn about Turbopack and how to enable it in your application.",
label: "Try Turbopack",
value: /*#__PURE__*/ (0, _jsxruntime.jsx)(ChevronRight, {}),
onClick: ()=>setOpen(OVERLAYS.Turbo)
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "dev-tools-indicator-footer",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
"data-preferences": true,
label: "Preferences",
value: /*#__PURE__*/ (0, _jsxruntime.jsx)(_gearicon.default, {}),
onClick: ()=>setOpen(OVERLAYS.Preferences),
index: isTurbopack ? 2 : 3
})
})
]
})
})
]
});
}
function ChevronRight() {
return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
fill: "#666",
fillRule: "evenodd",
clipRule: "evenodd",
d: "M5.50011 1.93945L6.03044 2.46978L10.8537 7.293C11.2442 7.68353 11.2442 8.31669 10.8537 8.70722L6.03044 13.5304L5.50011 14.0608L4.43945 13.0001L4.96978 12.4698L9.43945 8.00011L4.96978 3.53044L4.43945 3.00011L5.50011 1.93945Z"
})
});
}
function MenuItem(param) {
let { index, label, value, onClick, href, ...props } = param;
const isInteractive = typeof onClick === 'function' || typeof href === 'string';
const { closeMenu, selectedIndex, setSelectedIndex } = (0, _react.useContext)(Context);
const selected = selectedIndex === index;
function click() {
if (isInteractive) {
onClick == null ? void 0 : onClick();
closeMenu();
if (href) {
window.open(href, '_blank', 'noopener, noreferrer');
}
}
}
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "dev-tools-indicator-item",
"data-index": index,
"data-selected": selected,
onClick: click,
// Needs `onMouseMove` instead of enter to work together
// with keyboard and mouse input
onMouseMove: ()=>{
if (isInteractive && index !== undefined && selectedIndex !== index) {
setSelectedIndex(index);
}
},
onMouseLeave: ()=>setSelectedIndex(-1),
onKeyDown: (e)=>{
if (e.key === 'Enter' || e.key === ' ') {
click();
}
},
role: isInteractive ? 'menuitem' : undefined,
tabIndex: selected ? 0 : -1,
...props,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "dev-tools-indicator-label",
children: label
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "dev-tools-indicator-value",
children: value
})
]
});
}
function IssueCount(param) {
let { children } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
className: "dev-tools-indicator-issue-count",
"data-has-issues": children > 0,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "dev-tools-indicator-issue-count-indicator"
}),
children
]
});
}
const DEV_TOOLS_INDICATOR_STYLES = "\n .dev-tools-indicator-menu {\n -webkit-font-smoothing: antialiased;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n background-clip: padding-box;\n box-shadow: var(--shadow-menu);\n border-radius: var(--rounded-xl);\n position: absolute;\n font-family: var(--font-stack-sans);\n z-index: 1000;\n overflow: hidden;\n opacity: 0;\n outline: 0;\n min-width: 248px;\n transition: opacity var(--animate-out-duration-ms)\n var(--animate-out-timing-function);\n\n &[data-rendered='true'] {\n opacity: 1;\n scale: 1;\n }\n }\n\n .dev-tools-indicator-inner {\n padding: 6px;\n width: 100%;\n }\n\n .dev-tools-indicator-item {\n display: flex;\n align-items: center;\n padding: 8px 6px;\n height: var(--size-36);\n border-radius: 6px;\n text-decoration: none !important;\n user-select: none;\n white-space: nowrap;\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n\n &:focus-visible {\n outline: 0;\n }\n }\n\n .dev-tools-indicator-footer {\n background: var(--color-background-200);\n padding: 6px;\n border-top: 1px solid var(--color-gray-400);\n width: 100%;\n }\n\n .dev-tools-indicator-item[data-selected='true'] {\n cursor: pointer;\n background-color: var(--color-gray-200);\n }\n\n .dev-tools-indicator-label {\n font-size: var(--size-14);\n line-height: var(--size-20);\n color: var(--color-gray-1000);\n }\n\n .dev-tools-indicator-value {\n font-size: var(--size-14);\n line-height: var(--size-20);\n color: var(--color-gray-900);\n margin-left: auto;\n }\n\n .dev-tools-indicator-issue-count {\n --color-primary: var(--color-gray-800);\n --color-secondary: var(--color-gray-100);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-width: var(--size-40);\n height: var(--size-24);\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n background-clip: padding-box;\n box-shadow: var(--shadow-small);\n padding: 2px;\n color: var(--color-gray-1000);\n border-radius: 128px;\n font-weight: 500;\n font-size: var(--size-13);\n font-variant-numeric: tabular-nums;\n\n &[data-has-issues='true'] {\n --color-primary: var(--color-red-800);\n --color-secondary: var(--color-red-100);\n }\n\n .dev-tools-indicator-issue-count-indicator {\n width: var(--size-8);\n height: var(--size-8);\n background: var(--color-primary);\n box-shadow: 0 0 0 2px var(--color-secondary);\n border-radius: 50%;\n }\n }\n\n .dev-tools-indicator-shortcut {\n display: flex;\n gap: 4px;\n\n kbd {\n width: var(--size-20);\n height: var(--size-20);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--rounded-md);\n border: 1px solid var(--color-gray-400);\n font-family: var(--font-stack-sans);\n background: var(--color-background-100);\n color: var(--color-gray-1000);\n text-align: center;\n font-size: var(--size-12);\n line-height: var(--size-16);\n }\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=dev-tools-indicator.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,12 @@
export interface DevToolsInfoPropsCore {
isOpen: boolean;
triggerRef: React.RefObject<HTMLButtonElement | null>;
close: () => void;
}
export interface DevToolsInfoProps extends DevToolsInfoPropsCore {
title: string;
children: React.ReactNode;
learnMoreLink?: string;
}
export declare function DevToolsInfo({ title, children, learnMoreLink, isOpen, triggerRef, close, ...props }: DevToolsInfoProps): import("react/jsx-runtime").JSX.Element | null;
export declare const DEV_TOOLS_INFO_STYLES = "\n [data-info-popover] {\n -webkit-font-smoothing: antialiased;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n background-clip: padding-box;\n box-shadow: var(--shadow-menu);\n border-radius: var(--rounded-xl);\n position: absolute;\n font-family: var(--font-stack-sans);\n z-index: 1000;\n overflow: hidden;\n opacity: 0;\n outline: 0;\n min-width: 350px;\n transition: opacity var(--animate-out-duration-ms)\n var(--animate-out-timing-function);\n\n &[data-rendered='true'] {\n opacity: 1;\n scale: 1;\n }\n\n button:focus-visible {\n outline: var(--focus-ring);\n }\n }\n\n .dev-tools-info-container {\n padding: 12px;\n }\n\n .dev-tools-info-title {\n padding: 8px 6px;\n color: var(--color-gray-1000);\n font-size: var(--size-16);\n font-weight: 600;\n line-height: var(--size-20);\n margin: 0;\n }\n\n .dev-tools-info-article {\n padding: 8px 6px;\n color: var(--color-gray-1000);\n font-size: var(--size-14);\n line-height: var(--size-20);\n margin: 0;\n }\n .dev-tools-info-paragraph {\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n .dev-tools-info-button-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 6px;\n }\n\n .dev-tools-info-close-button {\n padding: 0 8px;\n height: var(--size-28);\n font-size: var(--size-14);\n font-weight: 500;\n line-height: var(--size-20);\n transition: background var(--duration-short) ease;\n color: var(--color-gray-1000);\n border-radius: var(--rounded-md-2);\n border: 1px solid var(--color-gray-alpha-400);\n background: var(--color-background-200);\n }\n\n .dev-tools-info-close-button:hover {\n background: var(--color-gray-400);\n }\n\n .dev-tools-info-learn-more-button {\n align-content: center;\n padding: 0 8px;\n height: var(--size-28);\n font-size: var(--size-14);\n font-weight: 500;\n line-height: var(--size-20);\n transition: background var(--duration-short) ease;\n color: var(--color-background-100);\n border-radius: var(--rounded-md-2);\n background: var(--color-gray-1000);\n }\n\n .dev-tools-info-learn-more-button:hover {\n text-decoration: none;\n color: var(--color-background-100);\n opacity: 0.9;\n }\n";

View File

@@ -0,0 +1,91 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
DEV_TOOLS_INFO_STYLES: null,
DevToolsInfo: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DEV_TOOLS_INFO_STYLES: function() {
return DEV_TOOLS_INFO_STYLES;
},
DevToolsInfo: function() {
return DevToolsInfo;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _utils = require("../utils");
const _usedelayedrender = require("../../../../hooks/use-delayed-render");
function DevToolsInfo(param) {
let { title, children, learnMoreLink, isOpen, triggerRef, close, ...props } = param;
const ref = (0, _react.useRef)(null);
const closeButtonRef = (0, _react.useRef)(null);
const { mounted, rendered } = (0, _usedelayedrender.useDelayedRender)(isOpen, {
// Intentionally no fade in, makes the UI feel more immediate
enterDelay: 0,
// Graceful fade out to confirm that the UI did not break
exitDelay: _utils.MENU_DURATION_MS
});
(0, _utils.useFocusTrap)(ref, triggerRef, isOpen, ()=>{
var // Bring focus to close button, so the user can easily close the overlay
_closeButtonRef_current;
(_closeButtonRef_current = closeButtonRef.current) == null ? void 0 : _closeButtonRef_current.focus();
});
(0, _utils.useClickOutside)(ref, triggerRef, isOpen, close);
if (!mounted) {
return null;
}
return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
tabIndex: -1,
role: "dialog",
ref: ref,
"data-info-popover": true,
...props,
"data-rendered": rendered,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "dev-tools-info-container",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("h1", {
className: "dev-tools-info-title",
children: title
}),
children,
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "dev-tools-info-button-container",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
ref: closeButtonRef,
className: "dev-tools-info-close-button",
onClick: close,
children: "Close"
}),
learnMoreLink && /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
className: "dev-tools-info-learn-more-button",
href: learnMoreLink,
target: "_blank",
rel: "noreferrer noopener",
children: "Learn More"
})
]
})
]
})
});
}
const DEV_TOOLS_INFO_STYLES = "\n [data-info-popover] {\n -webkit-font-smoothing: antialiased;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n background-clip: padding-box;\n box-shadow: var(--shadow-menu);\n border-radius: var(--rounded-xl);\n position: absolute;\n font-family: var(--font-stack-sans);\n z-index: 1000;\n overflow: hidden;\n opacity: 0;\n outline: 0;\n min-width: 350px;\n transition: opacity var(--animate-out-duration-ms)\n var(--animate-out-timing-function);\n\n &[data-rendered='true'] {\n opacity: 1;\n scale: 1;\n }\n\n button:focus-visible {\n outline: var(--focus-ring);\n }\n }\n\n .dev-tools-info-container {\n padding: 12px;\n }\n\n .dev-tools-info-title {\n padding: 8px 6px;\n color: var(--color-gray-1000);\n font-size: var(--size-16);\n font-weight: 600;\n line-height: var(--size-20);\n margin: 0;\n }\n\n .dev-tools-info-article {\n padding: 8px 6px;\n color: var(--color-gray-1000);\n font-size: var(--size-14);\n line-height: var(--size-20);\n margin: 0;\n }\n .dev-tools-info-paragraph {\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n .dev-tools-info-button-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 6px;\n }\n\n .dev-tools-info-close-button {\n padding: 0 8px;\n height: var(--size-28);\n font-size: var(--size-14);\n font-weight: 500;\n line-height: var(--size-20);\n transition: background var(--duration-short) ease;\n color: var(--color-gray-1000);\n border-radius: var(--rounded-md-2);\n border: 1px solid var(--color-gray-alpha-400);\n background: var(--color-background-200);\n }\n\n .dev-tools-info-close-button:hover {\n background: var(--color-gray-400);\n }\n\n .dev-tools-info-learn-more-button {\n align-content: center;\n padding: 0 8px;\n height: var(--size-28);\n font-size: var(--size-14);\n font-weight: 500;\n line-height: var(--size-20);\n transition: background var(--duration-short) ease;\n color: var(--color-background-100);\n border-radius: var(--rounded-md-2);\n background: var(--color-gray-1000);\n }\n\n .dev-tools-info-learn-more-button:hover {\n text-decoration: none;\n color: var(--color-background-100);\n opacity: 0.9;\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=dev-tools-info.js.map

View File

@@ -0,0 +1,7 @@
import type { HTMLProps } from 'react';
import type { DevToolsInfoPropsCore } from './dev-tools-info';
export declare function RouteInfo({ routeType, routerType, ...props }: {
routeType: 'Static' | 'Dynamic';
routerType: 'pages' | 'app';
} & DevToolsInfoPropsCore & HTMLProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
export declare const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = "";

View File

@@ -0,0 +1,176 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
DEV_TOOLS_INFO_ROUTE_INFO_STYLES: null,
RouteInfo: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DEV_TOOLS_INFO_ROUTE_INFO_STYLES: function() {
return DEV_TOOLS_INFO_ROUTE_INFO_STYLES;
},
RouteInfo: function() {
return RouteInfo;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _devtoolsinfo = require("./dev-tools-info");
function StaticRouteContent(param) {
let { routerType } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("article", {
className: "dev-tools-info-article",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
className: "dev-tools-info-paragraph",
children: [
"The path",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
className: "dev-tools-info-code",
children: window.location.pathname
}),
' ',
'is marked as "static" since it will be prerendered during the build time.'
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
className: "dev-tools-info-paragraph",
children: [
"With Static Rendering, routes are rendered at build time, or in the background after",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
className: "dev-tools-info-link",
href: routerType === 'pages' ? 'https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration' : "https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration",
target: "_blank",
rel: "noopener noreferrer",
children: "data revalidation"
}),
"."
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
className: "dev-tools-info-paragraph",
children: "Static rendering is useful when a route has data that is not personalized to the user and can be known at build time, such as a static blog post or a product page."
})
]
});
}
function DynamicRouteContent(param) {
let { routerType } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("article", {
className: "dev-tools-info-article",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
className: "dev-tools-info-paragraph",
children: [
"The path",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
className: "dev-tools-info-code",
children: window.location.pathname
}),
' ',
'is marked as "dynamic" since it will be rendered for each user at',
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
children: "request time"
}),
"."
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
className: "dev-tools-info-paragraph",
children: "Dynamic rendering is useful when a route has data that is personalized to the user or has information that can only be known at request time, such as cookies or the URL's search params."
}),
routerType === 'pages' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
className: "dev-tools-info-pagraph",
children: [
"Exporting the",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
className: "dev-tools-info-link",
href: "https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props",
target: "_blank",
rel: "noopener noreferrer",
children: "getServerSideProps"
}),
' ',
"function will opt the route into dynamic rendering. This function will be called by the server on every request."
]
}) : /*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
className: "dev-tools-info-paragraph",
children: [
"During rendering, if a",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
className: "dev-tools-info-link",
href: "https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-apis",
target: "_blank",
rel: "noopener noreferrer",
children: "Dynamic API"
}),
' ',
"or a",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
className: "dev-tools-info-link",
href: "https://nextjs.org/docs/app/api-reference/functions/fetch",
target: "_blank",
rel: "noopener noreferrer",
children: "fetch"
}),
' ',
"option of",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
className: "dev-tools-info-code",
children: "{ cache: 'no-store' }"
}),
' ',
"is discovered, Next.js will switch to dynamically rendering the whole route."
]
})
]
});
}
const learnMoreLink = {
pages: {
static: 'https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation',
dynamic: 'https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering'
},
app: {
static: 'https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default',
dynamic: 'https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering'
}
};
function RouteInfo(param) {
let { routeType, routerType, ...props } = param;
const isStaticRoute = routeType === 'Static';
const learnMore = isStaticRoute ? learnMoreLink[routerType].static : learnMoreLink[routerType].dynamic;
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_devtoolsinfo.DevToolsInfo, {
title: "" + routeType + " Route",
learnMoreLink: learnMore,
...props,
children: isStaticRoute ? /*#__PURE__*/ (0, _jsxruntime.jsx)(StaticRouteContent, {
routerType: routerType
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(DynamicRouteContent, {
routerType: routerType
})
});
}
const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = "";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=route-info.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,4 @@
import { type DevToolsInfoPropsCore } from './dev-tools-info';
import type { HTMLProps } from 'react';
export declare function TurbopackInfo(props: DevToolsInfoPropsCore & HTMLProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
export declare const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = "\n .dev-tools-info-code {\n background: var(--color-gray-400);\n color: var(--color-gray-1000);\n font-family: var(--font-stack-monospace);\n padding: 2px 4px;\n margin: 0;\n font-size: var(--size-13);\n white-space: break-spaces;\n border-radius: var(--rounded-md-2);\n }\n\n .dev-tools-info-code-block-container {\n padding: 6px;\n }\n\n .dev-tools-info-code-block {\n position: relative;\n background: var(--color-background-200);\n border: 1px solid var(--color-gray-alpha-400);\n border-radius: var(--rounded-md-2);\n min-width: 326px;\n }\n\n .dev-tools-info-code-block-pre {\n margin: 0;\n font-family: var(--font-stack-monospace);\n font-size: var(--size-12);\n }\n\n .dev-tools-info-copy-button {\n position: absolute;\n\n display: flex;\n justify-content: center;\n align-items: center;\n right: 8px;\n top: 8px;\n padding: 4px;\n height: var(--size-24);\n width: var(--size-24);\n border-radius: var(--rounded-md-2);\n border: 1px solid var(--color-gray-alpha-400);\n background: var(--color-background-100);\n }\n\n .dev-tools-info-code-block-line {\n display: block;\n line-height: 1.5;\n padding: 0 16px;\n }\n\n .dev-tools-info-code-block-line.dev-tools-info-highlight {\n border-left: 2px solid var(--color-blue-900);\n background: var(--color-blue-400);\n }\n\n .dev-tools-info-code-block-json-key {\n color: var(--color-syntax-keyword);\n }\n\n .dev-tools-info-code-block-json-value {\n color: var(--color-syntax-link);\n }\n";

View File

@@ -0,0 +1,198 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES: null,
TurbopackInfo: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES: function() {
return DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES;
},
TurbopackInfo: function() {
return TurbopackInfo;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _devtoolsinfo = require("./dev-tools-info");
const _copybutton = require("../../../copy-button");
function TurbopackInfo(props) {
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_devtoolsinfo.DevToolsInfo, {
title: "Turbopack",
learnMoreLink: "https://nextjs.org/docs/app/api-reference/turbopack",
...props,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("article", {
className: "dev-tools-info-article",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
className: "dev-tools-info-paragraph",
children: [
"Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js. Turbopack can be used in Next.js in both the",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
className: "dev-tools-info-code",
children: "pages"
}),
" and",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
className: "dev-tools-info-code",
children: "app"
}),
" directories for faster local development."
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
className: "dev-tools-info-paragraph",
children: [
"To enable Turbopack, use the",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
className: "dev-tools-info-code",
children: "--turbopack"
}),
" flag when running the Next.js development server."
]
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "dev-tools-info-code-block-container",
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "dev-tools-info-code-block",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_copybutton.CopyButton, {
actionLabel: "Copy Next.js Turbopack Command",
successLabel: "Next.js Turbopack Command Copied",
content: '--turbopack',
className: "dev-tools-info-copy-button"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
className: "dev-tools-info-code-block-pre",
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("code", {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "dev-tools-info-code-block-line",
children: ' '
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "dev-tools-info-code-block-line",
children: '{'
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "dev-tools-info-code-block-line",
children: [
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "dev-tools-info-code-block-json-key",
children: '"scripts"'
}),
": ",
'{'
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "dev-tools-info-code-block-line dev-tools-info-highlight",
children: [
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "dev-tools-info-code-block-json-key",
children: '"dev"'
}),
":",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "dev-tools-info-code-block-json-value",
children: '"next dev --turbopack"'
}),
","
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "dev-tools-info-code-block-line",
children: [
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "dev-tools-info-code-block-json-key",
children: '"build"'
}),
":",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "dev-tools-info-code-block-json-value",
children: '"next build"'
}),
","
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "dev-tools-info-code-block-line",
children: [
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "dev-tools-info-code-block-json-key",
children: '"start"'
}),
":",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "dev-tools-info-code-block-json-value",
children: '"next start"'
}),
","
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "dev-tools-info-code-block-line",
children: [
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "dev-tools-info-code-block-json-key",
children: '"lint"'
}),
":",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
className: "dev-tools-info-code-block-json-value",
children: '"next lint"'
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "dev-tools-info-code-block-line",
children: ' }'
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "dev-tools-info-code-block-line",
children: '}'
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "dev-tools-info-code-block-line",
children: ' '
})
]
})
})
]
})
})
]
});
}
const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = "\n .dev-tools-info-code {\n background: var(--color-gray-400);\n color: var(--color-gray-1000);\n font-family: var(--font-stack-monospace);\n padding: 2px 4px;\n margin: 0;\n font-size: var(--size-13);\n white-space: break-spaces;\n border-radius: var(--rounded-md-2);\n }\n\n .dev-tools-info-code-block-container {\n padding: 6px;\n }\n\n .dev-tools-info-code-block {\n position: relative;\n background: var(--color-background-200);\n border: 1px solid var(--color-gray-alpha-400);\n border-radius: var(--rounded-md-2);\n min-width: 326px;\n }\n\n .dev-tools-info-code-block-pre {\n margin: 0;\n font-family: var(--font-stack-monospace);\n font-size: var(--size-12);\n }\n\n .dev-tools-info-copy-button {\n position: absolute;\n\n display: flex;\n justify-content: center;\n align-items: center;\n right: 8px;\n top: 8px;\n padding: 4px;\n height: var(--size-24);\n width: var(--size-24);\n border-radius: var(--rounded-md-2);\n border: 1px solid var(--color-gray-alpha-400);\n background: var(--color-background-100);\n }\n\n .dev-tools-info-code-block-line {\n display: block;\n line-height: 1.5;\n padding: 0 16px;\n }\n\n .dev-tools-info-code-block-line.dev-tools-info-highlight {\n border-left: 2px solid var(--color-blue-900);\n background: var(--color-blue-400);\n }\n\n .dev-tools-info-code-block-json-key {\n color: var(--color-syntax-keyword);\n }\n\n .dev-tools-info-code-block-json-value {\n color: var(--color-syntax-link);\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=turbopack-info.js.map

View File

@@ -0,0 +1,9 @@
import { type HTMLProps } from 'react';
import type { DevToolsInfoPropsCore } from './dev-tools-info';
import type { DevToolsIndicatorPosition } from '../dev-tools-indicator';
export declare function UserPreferences({ setPosition, position, hide, ...props }: {
setPosition: (position: DevToolsIndicatorPosition) => void;
position: DevToolsIndicatorPosition;
hide: () => void;
} & DevToolsInfoPropsCore & HTMLProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
export declare const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES: string;

View File

@@ -0,0 +1,272 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
DEV_TOOLS_INFO_USER_PREFERENCES_STYLES: null,
UserPreferences: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DEV_TOOLS_INFO_USER_PREFERENCES_STYLES: function() {
return DEV_TOOLS_INFO_USER_PREFERENCES_STYLES;
},
UserPreferences: function() {
return UserPreferences;
}
});
const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _css = require("../../../../../utils/css");
const _eyeicon = /*#__PURE__*/ _interop_require_default._(require("../../../../icons/eye-icon"));
const _shared = require("../../../../../shared");
const _lighticon = /*#__PURE__*/ _interop_require_default._(require("../../../../icons/light-icon"));
const _darkicon = /*#__PURE__*/ _interop_require_default._(require("../../../../icons/dark-icon"));
const _systemicon = /*#__PURE__*/ _interop_require_default._(require("../../../../icons/system-icon"));
const _devtoolsinfo = require("./dev-tools-info");
function _templateObject() {
const data = _tagged_template_literal_loose._([
"\n .preferences-container {\n padding: 8px 6px;\n width: 100%;\n }\n\n @media (min-width: 576px) {\n .preferences-container {\n width: 480px;\n }\n }\n\n .preference-section:first-child {\n padding-top: 0;\n }\n\n .preference-section {\n padding: 12px 0;\n border-bottom: 1px solid var(--color-gray-400);\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 24px;\n }\n\n .preference-section:last-child {\n border-bottom: none;\n }\n\n .preference-header {\n margin-bottom: 0;\n flex: 1;\n }\n\n .preference-header label {\n font-size: var(--size-14);\n font-weight: 500;\n color: var(--color-gray-1000);\n margin: 0;\n }\n\n .preference-description {\n color: var(--color-gray-900);\n font-size: var(--size-14);\n margin: 0;\n }\n\n .preference-icon {\n display: flex;\n align-items: center;\n width: 16px;\n height: 16px;\n }\n\n .select-button,\n .action-button {\n display: flex;\n align-items: center;\n gap: 8px;\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-400);\n border-radius: var(--rounded-lg);\n font-weight: 400;\n font-size: var(--size-14);\n color: var(--color-gray-1000);\n padding: 6px 8px;\n\n &:hover {\n background: var(--color-gray-100);\n }\n }\n\n .preference-control-select {\n padding: 6px 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n border-radius: var(--rounded-lg);\n border: 1px solid var(--color-gray-400);\n\n &:hover {\n background: var(--color-gray-100);\n }\n\n &:focus-within {\n outline: var(--focus-ring);\n }\n }\n\n .preference-control-select select {\n font-size: var(--size-14);\n font-weight: 400;\n border: none;\n padding: 0 6px 0 0;\n border-radius: 0;\n outline: none;\n background: none;\n }\n\n :global(.icon) {\n width: 18px;\n height: 18px;\n color: #666;\n }\n"
]);
_templateObject = function() {
return data;
};
return data;
}
function getInitialPreference() {
if (typeof localStorage === 'undefined') {
return 'system';
}
const theme = localStorage.getItem(_shared.STORAGE_KEY_THEME);
return theme === 'dark' || theme === 'light' ? theme : 'system';
}
function UserPreferences(param) {
let { setPosition, position, hide, ...props } = param;
// derive initial theme from system preference
const [theme, setTheme] = (0, _react.useState)(getInitialPreference());
const handleThemeChange = (e)=>{
const portal = document.querySelector('nextjs-portal');
if (!portal) return;
setTheme(e.target.value);
if (e.target.value === 'system') {
portal.classList.remove('dark');
portal.classList.remove('light');
localStorage.removeItem(_shared.STORAGE_KEY_THEME);
return;
}
if (e.target.value === 'dark') {
portal.classList.add('dark');
portal.classList.remove('light');
localStorage.setItem(_shared.STORAGE_KEY_THEME, 'dark');
} else {
portal.classList.remove('dark');
portal.classList.add('light');
localStorage.setItem(_shared.STORAGE_KEY_THEME, 'light');
}
};
function handlePositionChange(e) {
setPosition(e.target.value);
localStorage.setItem(_shared.STORAGE_KEY_POSITION, e.target.value);
}
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_devtoolsinfo.DevToolsInfo, {
title: "Preferences",
...props,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "preferences-container",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "preference-section",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "preference-header",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("label", {
htmlFor: "theme",
children: "Theme"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
className: "preference-description",
children: "Select your theme preference."
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "preference-control-select",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "preference-icon",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ThemeIcon, {
theme: theme
})
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("select", {
id: "theme",
name: "theme",
className: "select-button",
value: theme,
onChange: handleThemeChange,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
value: "system",
children: "System"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
value: "light",
children: "Light"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
value: "dark",
children: "Dark"
})
]
})
]
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "preference-section",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "preference-header",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("label", {
htmlFor: "position",
children: "Position"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
className: "preference-description",
children: "Adjust the placement of your dev tools."
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "preference-control-select",
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("select", {
id: "position",
name: "position",
className: "select-button",
value: position,
onChange: handlePositionChange,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
value: "bottom-left",
children: "Bottom Left"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
value: "bottom-right",
children: "Bottom Right"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
value: "top-left",
children: "Top Left"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
value: "top-right",
children: "Top Right"
})
]
})
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "preference-section",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "preference-header",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("label", {
htmlFor: "hide-dev-tools",
children: "Hide Dev Tools for this session"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
className: "preference-description",
children: "Hide Dev Tools until you restart your dev server, or 1 day."
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "preference-control",
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
id: "hide-dev-tools",
name: "hide-dev-tools",
"data-hide-dev-tools": true,
className: "action-button",
onClick: hide,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "preference-icon",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_eyeicon.default, {})
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
children: "Hide"
})
]
})
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "preference-section",
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "preference-header",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("label", {
children: "Disable Dev Tools for this project"
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
className: "preference-description",
children: [
"To disable this UI completely, set",
' ',
/*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
className: "dev-tools-info-code",
children: "devIndicators: false"
}),
' ',
"in your ",
/*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
className: "dev-tools-info-code",
children: "next.config"
}),
' ',
"file."
]
})
]
})
})
]
})
});
}
function ThemeIcon(param) {
let { theme } = param;
switch(theme){
case 'system':
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_systemicon.default, {});
case 'dark':
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_darkicon.default, {});
case 'light':
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_lighticon.default, {});
default:
return null;
}
}
const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES = (0, _css.css)(_templateObject());
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=user-preferences.js.map

View File

@@ -0,0 +1,11 @@
interface Props extends React.ComponentProps<'button'> {
issueCount: number;
isDevBuilding: boolean;
isDevRendering: boolean;
isBuildError: boolean;
onTriggerClick: () => void;
toggleErrorOverlay: () => void;
}
export declare const NextLogo: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
export declare function Cross(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
export {};

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,12 @@
/**
* A React hook that ensures a loading state persists
* at least up to the next multiple of a given interval (default: 750ms).
*
* For example, if you're done loading at 1200ms, it forces you to wait
* until 1500ms. If its 1800ms, it waits until 2250ms, etc.
*
* @param isLoadingTrigger - Boolean that triggers the loading state
* @param interval - The time interval multiple in ms (default: 750ms)
* @returns Current loading state that respects multiples of the interval
*/
export declare function useMinimumLoadingTimeMultiple(isLoadingTrigger: boolean, interval?: number): boolean;

View File

@@ -0,0 +1,73 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMinimumLoadingTimeMultiple", {
enumerable: true,
get: function() {
return useMinimumLoadingTimeMultiple;
}
});
const _react = require("react");
function useMinimumLoadingTimeMultiple(isLoadingTrigger, interval) {
if (interval === void 0) interval = 750;
const [isLoading, setIsLoading] = (0, _react.useState)(false);
const loadStartTimeRef = (0, _react.useRef)(null);
const timeoutIdRef = (0, _react.useRef)(null);
(0, _react.useEffect)(()=>{
// Clear any pending timeout to avoid overlap
if (timeoutIdRef.current) {
clearTimeout(timeoutIdRef.current);
timeoutIdRef.current = null;
}
if (isLoadingTrigger) {
// If we enter "loading" state, record start time if not already
if (loadStartTimeRef.current === null) {
loadStartTimeRef.current = Date.now();
}
setIsLoading(true);
} else {
// If we're exiting the "loading" state:
if (loadStartTimeRef.current === null) {
// No start time was recorded, so just stop loading immediately
setIsLoading(false);
} else {
// How long we've been "loading"
const timeDiff = Date.now() - loadStartTimeRef.current;
// Next multiple of `interval` after `timeDiff`
const nextMultiple = interval * Math.ceil(timeDiff / interval);
// Remaining time needed to reach that multiple
const remainingTime = nextMultiple - timeDiff;
if (remainingTime > 0) {
// If not yet at that multiple, schedule the final step
timeoutIdRef.current = setTimeout(()=>{
setIsLoading(false);
loadStartTimeRef.current = null;
}, remainingTime);
} else {
// We're already past the multiple boundary
setIsLoading(false);
loadStartTimeRef.current = null;
}
}
}
// Cleanup when effect is about to re-run or component unmounts
return ()=>{
if (timeoutIdRef.current) {
clearTimeout(timeoutIdRef.current);
}
};
}, [
isLoadingTrigger,
interval
]);
return isLoading;
}
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=use-minimum-loading-time-multiple.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/use-minimum-loading-time-multiple.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\n/**\n * A React hook that ensures a loading state persists\n * at least up to the next multiple of a given interval (default: 750ms).\n *\n * For example, if you're done loading at 1200ms, it forces you to wait\n * until 1500ms. If its 1800ms, it waits until 2250ms, etc.\n *\n * @param isLoadingTrigger - Boolean that triggers the loading state\n * @param interval - The time interval multiple in ms (default: 750ms)\n * @returns Current loading state that respects multiples of the interval\n */\nexport function useMinimumLoadingTimeMultiple(\n isLoadingTrigger: boolean,\n interval = 750\n) {\n const [isLoading, setIsLoading] = useState(false)\n const loadStartTimeRef = useRef<number | null>(null)\n const timeoutIdRef = useRef<NodeJS.Timeout | null>(null)\n\n useEffect(() => {\n // Clear any pending timeout to avoid overlap\n if (timeoutIdRef.current) {\n clearTimeout(timeoutIdRef.current)\n timeoutIdRef.current = null\n }\n\n if (isLoadingTrigger) {\n // If we enter \"loading\" state, record start time if not already\n if (loadStartTimeRef.current === null) {\n loadStartTimeRef.current = Date.now()\n }\n setIsLoading(true)\n } else {\n // If we're exiting the \"loading\" state:\n if (loadStartTimeRef.current === null) {\n // No start time was recorded, so just stop loading immediately\n setIsLoading(false)\n } else {\n // How long we've been \"loading\"\n const timeDiff = Date.now() - loadStartTimeRef.current\n\n // Next multiple of `interval` after `timeDiff`\n const nextMultiple = interval * Math.ceil(timeDiff / interval)\n\n // Remaining time needed to reach that multiple\n const remainingTime = nextMultiple - timeDiff\n\n if (remainingTime > 0) {\n // If not yet at that multiple, schedule the final step\n timeoutIdRef.current = setTimeout(() => {\n setIsLoading(false)\n loadStartTimeRef.current = null\n }, remainingTime)\n } else {\n // We're already past the multiple boundary\n setIsLoading(false)\n loadStartTimeRef.current = null\n }\n }\n }\n\n // Cleanup when effect is about to re-run or component unmounts\n return () => {\n if (timeoutIdRef.current) {\n clearTimeout(timeoutIdRef.current)\n }\n }\n }, [isLoadingTrigger, interval])\n\n return isLoading\n}\n"],"names":["useMinimumLoadingTimeMultiple","isLoadingTrigger","interval","isLoading","setIsLoading","useState","loadStartTimeRef","useRef","timeoutIdRef","useEffect","current","clearTimeout","Date","now","timeDiff","nextMultiple","Math","ceil","remainingTime","setTimeout"],"mappings":";;;;+BAagBA;;;eAAAA;;;uBAb4B;AAarC,SAASA,8BACdC,gBAAyB,EACzBC,QAAc;IAAdA,IAAAA,qBAAAA,WAAW;IAEX,MAAM,CAACC,WAAWC,aAAa,GAAGC,IAAAA,eAAQ,EAAC;IAC3C,MAAMC,mBAAmBC,IAAAA,aAAM,EAAgB;IAC/C,MAAMC,eAAeD,IAAAA,aAAM,EAAwB;IAEnDE,IAAAA,gBAAS,EAAC;QACR,6CAA6C;QAC7C,IAAID,aAAaE,OAAO,EAAE;YACxBC,aAAaH,aAAaE,OAAO;YACjCF,aAAaE,OAAO,GAAG;QACzB;QAEA,IAAIT,kBAAkB;YACpB,gEAAgE;YAChE,IAAIK,iBAAiBI,OAAO,KAAK,MAAM;gBACrCJ,iBAAiBI,OAAO,GAAGE,KAAKC,GAAG;YACrC;YACAT,aAAa;QACf,OAAO;YACL,wCAAwC;YACxC,IAAIE,iBAAiBI,OAAO,KAAK,MAAM;gBACrC,+DAA+D;gBAC/DN,aAAa;YACf,OAAO;gBACL,gCAAgC;gBAChC,MAAMU,WAAWF,KAAKC,GAAG,KAAKP,iBAAiBI,OAAO;gBAEtD,+CAA+C;gBAC/C,MAAMK,eAAeb,WAAWc,KAAKC,IAAI,CAACH,WAAWZ;gBAErD,+CAA+C;gBAC/C,MAAMgB,gBAAgBH,eAAeD;gBAErC,IAAII,gBAAgB,GAAG;oBACrB,uDAAuD;oBACvDV,aAAaE,OAAO,GAAGS,WAAW;wBAChCf,aAAa;wBACbE,iBAAiBI,OAAO,GAAG;oBAC7B,GAAGQ;gBACL,OAAO;oBACL,2CAA2C;oBAC3Cd,aAAa;oBACbE,iBAAiBI,OAAO,GAAG;gBAC7B;YACF;QACF;QAEA,+DAA+D;QAC/D,OAAO;YACL,IAAIF,aAAaE,OAAO,EAAE;gBACxBC,aAAaH,aAAaE,OAAO;YACnC;QACF;IACF,GAAG;QAACT;QAAkBC;KAAS;IAE/B,OAAOC;AACT"}

View File

@@ -0,0 +1,4 @@
export declare function useFocusTrap(rootRef: React.RefObject<HTMLElement | null>, triggerRef: React.RefObject<HTMLButtonElement | null> | null, active: boolean, onOpenFocus?: () => void): void;
export declare function useClickOutside(rootRef: React.RefObject<HTMLElement | null>, triggerRef: React.RefObject<HTMLButtonElement | null>, active: boolean, close: () => void): void;
export declare const MENU_DURATION_MS = 200;
export declare const MENU_CURVE = "cubic-bezier(0.175, 0.885, 0.32, 1.1)";

View File

@@ -0,0 +1,131 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
MENU_CURVE: null,
MENU_DURATION_MS: null,
useClickOutside: null,
useFocusTrap: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
MENU_CURVE: function() {
return MENU_CURVE;
},
MENU_DURATION_MS: function() {
return MENU_DURATION_MS;
},
useClickOutside: function() {
return useClickOutside;
},
useFocusTrap: function() {
return useFocusTrap;
}
});
const _react = require("react");
function useFocusTrap(rootRef, triggerRef, active, onOpenFocus) {
(0, _react.useEffect)(()=>{
let rootNode = null;
function onTab(e) {
if (e.key !== 'Tab' || rootNode === null) {
return;
}
const [firstFocusableNode, lastFocusableNode] = getFocusableNodes(rootNode);
const activeElement = getActiveElement(rootNode);
if (e.shiftKey) {
if (activeElement === firstFocusableNode) {
lastFocusableNode == null ? void 0 : lastFocusableNode.focus();
e.preventDefault();
}
} else {
if (activeElement === lastFocusableNode) {
firstFocusableNode == null ? void 0 : firstFocusableNode.focus();
e.preventDefault();
}
}
}
const id = setTimeout(()=>{
// Grab this on next tick to ensure the content is mounted
rootNode = rootRef.current;
if (active) {
if (onOpenFocus) {
onOpenFocus();
} else {
rootNode == null ? void 0 : rootNode.focus();
}
rootNode == null ? void 0 : rootNode.addEventListener('keydown', onTab);
} else {
const activeElement = getActiveElement(rootNode);
// Only restore focus if the focus was previously on the content.
// This avoids us accidentally focusing on mount when the
// user could want to interact with their own app instead.
if (triggerRef && (rootNode == null ? void 0 : rootNode.contains(activeElement))) {
var _triggerRef_current;
(_triggerRef_current = triggerRef.current) == null ? void 0 : _triggerRef_current.focus();
}
}
});
return ()=>{
clearTimeout(id);
rootNode == null ? void 0 : rootNode.removeEventListener('keydown', onTab);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
active
]);
}
function getActiveElement(node) {
const root = node == null ? void 0 : node.getRootNode();
return root instanceof ShadowRoot ? root == null ? void 0 : root.activeElement : null;
}
function getFocusableNodes(node) {
const focusableElements = node.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
if (!focusableElements) return [];
return [
focusableElements[0],
focusableElements[focusableElements.length - 1]
];
}
function useClickOutside(rootRef, triggerRef, active, close) {
(0, _react.useEffect)(()=>{
if (!active) {
return;
}
function handleClickOutside(event) {
var _rootRef_current, _triggerRef_current;
if (!(((_rootRef_current = rootRef.current) == null ? void 0 : _rootRef_current.getBoundingClientRect()) ? event.clientX >= rootRef.current.getBoundingClientRect().left && event.clientX <= rootRef.current.getBoundingClientRect().right && event.clientY >= rootRef.current.getBoundingClientRect().top && event.clientY <= rootRef.current.getBoundingClientRect().bottom : false) && !(((_triggerRef_current = triggerRef.current) == null ? void 0 : _triggerRef_current.getBoundingClientRect()) ? event.clientX >= triggerRef.current.getBoundingClientRect().left && event.clientX <= triggerRef.current.getBoundingClientRect().right && event.clientY >= triggerRef.current.getBoundingClientRect().top && event.clientY <= triggerRef.current.getBoundingClientRect().bottom : false)) {
close();
}
}
function handleKeyDown(event) {
if (event.key === 'Escape') {
close();
}
}
document.addEventListener('mousedown', handleClickOutside);
document.addEventListener('keydown', handleKeyDown);
return ()=>{
document.removeEventListener('mousedown', handleClickOutside);
document.removeEventListener('keydown', handleKeyDown);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
active
]);
}
const MENU_DURATION_MS = 200;
const MENU_CURVE = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)';
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=utils.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,7 @@
type ErrorOverlayDialogBodyProps = {
children?: React.ReactNode;
onClose?: () => void;
};
export declare function ErrorOverlayDialogBody({ children, }: ErrorOverlayDialogBodyProps): import("react/jsx-runtime").JSX.Element;
export declare const DIALOG_BODY_STYLES = "";
export {};

View File

@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
DIALOG_BODY_STYLES: null,
ErrorOverlayDialogBody: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DIALOG_BODY_STYLES: function() {
return DIALOG_BODY_STYLES;
},
ErrorOverlayDialogBody: function() {
return ErrorOverlayDialogBody;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _dialog = require("../../dialog");
function ErrorOverlayDialogBody(param) {
let { children } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dialog.DialogBody, {
className: "nextjs-container-errors-body",
children: children
});
}
const DIALOG_BODY_STYLES = "";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=body.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dialog/body.tsx"],"sourcesContent":["import { DialogBody } from '../../dialog'\n\ntype ErrorOverlayDialogBodyProps = {\n children?: React.ReactNode\n onClose?: () => void\n}\n\nexport function ErrorOverlayDialogBody({\n children,\n}: ErrorOverlayDialogBodyProps) {\n return (\n <DialogBody className=\"nextjs-container-errors-body\">{children}</DialogBody>\n )\n}\n\nexport const DIALOG_BODY_STYLES = ``\n"],"names":["DIALOG_BODY_STYLES","ErrorOverlayDialogBody","children","DialogBody","className"],"mappings":";;;;;;;;;;;;;;;IAeaA,kBAAkB;eAAlBA;;IARGC,sBAAsB;eAAtBA;;;;wBAPW;AAOpB,SAASA,uBAAuB,KAET;IAFS,IAAA,EACrCC,QAAQ,EACoB,GAFS;IAGrC,qBACE,qBAACC,kBAAU;QAACC,WAAU;kBAAgCF;;AAE1D;AAEO,MAAMF,qBAAsB"}

View File

@@ -0,0 +1,8 @@
type ErrorOverlayDialogProps = {
children?: React.ReactNode;
onClose?: () => void;
dialogResizerRef?: React.RefObject<HTMLDivElement | null>;
};
export declare function ErrorOverlayDialog({ children, onClose, ...props }: ErrorOverlayDialogProps): import("react/jsx-runtime").JSX.Element;
export declare const DIALOG_STYLES = "\n .error-overlay-dialog {\n overflow-y: auto;\n -webkit-font-smoothing: antialiased;\n background: var(--color-background-100);\n background-clip: padding-box;\n border: 1px solid var(--color-gray-400);\n border-radius: var(--rounded-xl);\n box-shadow: var(--shadow-menu);\n position: relative;\n\n &:has(\n ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']\n ) {\n border-top-left-radius: 0;\n }\n\n &:has(\n ~ [data-nextjs-error-overlay-nav]\n .error-overlay-notch[data-side='right']\n ) {\n border-top-right-radius: 0;\n }\n }\n";
export {};

View File

@@ -0,0 +1,45 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
DIALOG_STYLES: null,
ErrorOverlayDialog: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DIALOG_STYLES: function() {
return DIALOG_STYLES;
},
ErrorOverlayDialog: function() {
return ErrorOverlayDialog;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _dialog = require("../../dialog/dialog");
function ErrorOverlayDialog(param) {
let { children, onClose, ...props } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dialog.Dialog, {
type: "error",
"aria-labelledby": "nextjs__container_errors_label",
"aria-describedby": "nextjs__container_errors_desc",
onClose: onClose,
className: "error-overlay-dialog",
...props,
children: children
});
}
const DIALOG_STYLES = "\n .error-overlay-dialog {\n overflow-y: auto;\n -webkit-font-smoothing: antialiased;\n background: var(--color-background-100);\n background-clip: padding-box;\n border: 1px solid var(--color-gray-400);\n border-radius: var(--rounded-xl);\n box-shadow: var(--shadow-menu);\n position: relative;\n\n &:has(\n ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']\n ) {\n border-top-left-radius: 0;\n }\n\n &:has(\n ~ [data-nextjs-error-overlay-nav]\n .error-overlay-notch[data-side='right']\n ) {\n border-top-right-radius: 0;\n }\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=dialog.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dialog/dialog.tsx"],"sourcesContent":["import { Dialog } from '../../dialog/dialog'\n\ntype ErrorOverlayDialogProps = {\n children?: React.ReactNode\n onClose?: () => void\n dialogResizerRef?: React.RefObject<HTMLDivElement | null>\n}\n\nexport function ErrorOverlayDialog({\n children,\n onClose,\n ...props\n}: ErrorOverlayDialogProps) {\n return (\n <Dialog\n type=\"error\"\n aria-labelledby=\"nextjs__container_errors_label\"\n aria-describedby=\"nextjs__container_errors_desc\"\n onClose={onClose}\n className=\"error-overlay-dialog\"\n {...props}\n >\n {children}\n </Dialog>\n )\n}\n\nexport const DIALOG_STYLES = `\n .error-overlay-dialog {\n overflow-y: auto;\n -webkit-font-smoothing: antialiased;\n background: var(--color-background-100);\n background-clip: padding-box;\n border: 1px solid var(--color-gray-400);\n border-radius: var(--rounded-xl);\n box-shadow: var(--shadow-menu);\n position: relative;\n\n &:has(\n ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']\n ) {\n border-top-left-radius: 0;\n }\n\n &:has(\n ~ [data-nextjs-error-overlay-nav]\n .error-overlay-notch[data-side='right']\n ) {\n border-top-right-radius: 0;\n }\n }\n`\n"],"names":["DIALOG_STYLES","ErrorOverlayDialog","children","onClose","props","Dialog","type","aria-labelledby","aria-describedby","className"],"mappings":";;;;;;;;;;;;;;;IA2BaA,aAAa;eAAbA;;IAnBGC,kBAAkB;eAAlBA;;;;wBARO;AAQhB,SAASA,mBAAmB,KAIT;IAJS,IAAA,EACjCC,QAAQ,EACRC,OAAO,EACP,GAAGC,OACqB,GAJS;IAKjC,qBACE,qBAACC,cAAM;QACLC,MAAK;QACLC,mBAAgB;QAChBC,oBAAiB;QACjBL,SAASA;QACTM,WAAU;QACT,GAAGL,KAAK;kBAERF;;AAGP;AAEO,MAAMF,gBAAiB"}

View File

@@ -0,0 +1,6 @@
type ErrorOverlayDialogHeaderProps = {
children?: React.ReactNode;
};
export declare function ErrorOverlayDialogHeader({ children, }: ErrorOverlayDialogHeaderProps): import("react/jsx-runtime").JSX.Element;
export declare const DIALOG_HEADER_STYLES = "\n .nextjs-container-errors-header {\n position: relative;\n }\n .nextjs-container-errors-header > h1 {\n font-size: var(--size-20);\n line-height: var(--size-24);\n font-weight: bold;\n margin: calc(16px * 1.5) 0;\n color: var(--color-title-h1);\n }\n .nextjs-container-errors-header small {\n font-size: var(--size-14);\n color: var(--color-accents-1);\n margin-left: 16px;\n }\n .nextjs-container-errors-header small > span {\n font-family: var(--font-stack-monospace);\n }\n .nextjs-container-errors-header > div > small {\n margin: 0;\n margin-top: 4px;\n }\n .nextjs-container-errors-header > p > a {\n color: inherit;\n font-weight: bold;\n }\n .nextjs-container-errors-header\n > .nextjs-container-build-error-version-status {\n position: absolute;\n top: 16px;\n right: 16px;\n }\n";
export {};

View File

@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
DIALOG_HEADER_STYLES: null,
ErrorOverlayDialogHeader: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DIALOG_HEADER_STYLES: function() {
return DIALOG_HEADER_STYLES;
},
ErrorOverlayDialogHeader: function() {
return ErrorOverlayDialogHeader;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _dialogheader = require("../../dialog/dialog-header");
function ErrorOverlayDialogHeader(param) {
let { children } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dialogheader.DialogHeader, {
className: "nextjs-container-errors-header",
children: children
});
}
const DIALOG_HEADER_STYLES = "\n .nextjs-container-errors-header {\n position: relative;\n }\n .nextjs-container-errors-header > h1 {\n font-size: var(--size-20);\n line-height: var(--size-24);\n font-weight: bold;\n margin: calc(16px * 1.5) 0;\n color: var(--color-title-h1);\n }\n .nextjs-container-errors-header small {\n font-size: var(--size-14);\n color: var(--color-accents-1);\n margin-left: 16px;\n }\n .nextjs-container-errors-header small > span {\n font-family: var(--font-stack-monospace);\n }\n .nextjs-container-errors-header > div > small {\n margin: 0;\n margin-top: 4px;\n }\n .nextjs-container-errors-header > p > a {\n color: inherit;\n font-weight: bold;\n }\n .nextjs-container-errors-header\n > .nextjs-container-build-error-version-status {\n position: absolute;\n top: 16px;\n right: 16px;\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=header.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dialog/header.tsx"],"sourcesContent":["import { DialogHeader } from '../../dialog/dialog-header'\n\ntype ErrorOverlayDialogHeaderProps = {\n children?: React.ReactNode\n}\n\nexport function ErrorOverlayDialogHeader({\n children,\n}: ErrorOverlayDialogHeaderProps) {\n return (\n <DialogHeader className=\"nextjs-container-errors-header\">\n {children}\n </DialogHeader>\n )\n}\n\nexport const DIALOG_HEADER_STYLES = `\n .nextjs-container-errors-header {\n position: relative;\n }\n .nextjs-container-errors-header > h1 {\n font-size: var(--size-20);\n line-height: var(--size-24);\n font-weight: bold;\n margin: calc(16px * 1.5) 0;\n color: var(--color-title-h1);\n }\n .nextjs-container-errors-header small {\n font-size: var(--size-14);\n color: var(--color-accents-1);\n margin-left: 16px;\n }\n .nextjs-container-errors-header small > span {\n font-family: var(--font-stack-monospace);\n }\n .nextjs-container-errors-header > div > small {\n margin: 0;\n margin-top: 4px;\n }\n .nextjs-container-errors-header > p > a {\n color: inherit;\n font-weight: bold;\n }\n .nextjs-container-errors-header\n > .nextjs-container-build-error-version-status {\n position: absolute;\n top: 16px;\n right: 16px;\n }\n`\n"],"names":["DIALOG_HEADER_STYLES","ErrorOverlayDialogHeader","children","DialogHeader","className"],"mappings":";;;;;;;;;;;;;;;IAgBaA,oBAAoB;eAApBA;;IAVGC,wBAAwB;eAAxBA;;;;8BANa;AAMtB,SAASA,yBAAyB,KAET;IAFS,IAAA,EACvCC,QAAQ,EACsB,GAFS;IAGvC,qBACE,qBAACC,0BAAY;QAACC,WAAU;kBACrBF;;AAGP;AAEO,MAAMF,uBAAwB"}

View File

@@ -0,0 +1,4 @@
export declare function EnvironmentNameLabel({ environmentName, }: {
environmentName: string;
}): import("react/jsx-runtime").JSX.Element;
export declare const ENVIRONMENT_NAME_LABEL_STYLES = "\n [data-nextjs-environment-name-label] {\n padding: 2px 6px;\n margin: 0;\n border-radius: var(--rounded-md-2);\n background: var(--color-gray-100);\n font-weight: 600;\n font-size: var(--size-12);\n color: var(--color-gray-900);\n font-family: var(--font-stack-monospace);\n line-height: var(--size-20);\n }\n";

View File

@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
ENVIRONMENT_NAME_LABEL_STYLES: null,
EnvironmentNameLabel: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ENVIRONMENT_NAME_LABEL_STYLES: function() {
return ENVIRONMENT_NAME_LABEL_STYLES;
},
EnvironmentNameLabel: function() {
return EnvironmentNameLabel;
}
});
const _jsxruntime = require("react/jsx-runtime");
function EnvironmentNameLabel(param) {
let { environmentName } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
"data-nextjs-environment-name-label": true,
children: environmentName
});
}
const ENVIRONMENT_NAME_LABEL_STYLES = "\n [data-nextjs-environment-name-label] {\n padding: 2px 6px;\n margin: 0;\n border-radius: var(--rounded-md-2);\n background: var(--color-gray-100);\n font-weight: 600;\n font-size: var(--size-12);\n color: var(--color-gray-900);\n font-family: var(--font-stack-monospace);\n line-height: var(--size-20);\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=environment-name-label.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/environment-name-label/environment-name-label.tsx"],"sourcesContent":["export function EnvironmentNameLabel({\n environmentName,\n}: {\n environmentName: string\n}) {\n return <span data-nextjs-environment-name-label>{environmentName}</span>\n}\n\nexport const ENVIRONMENT_NAME_LABEL_STYLES = `\n [data-nextjs-environment-name-label] {\n padding: 2px 6px;\n margin: 0;\n border-radius: var(--rounded-md-2);\n background: var(--color-gray-100);\n font-weight: 600;\n font-size: var(--size-12);\n color: var(--color-gray-900);\n font-family: var(--font-stack-monospace);\n line-height: var(--size-20);\n }\n`\n"],"names":["ENVIRONMENT_NAME_LABEL_STYLES","EnvironmentNameLabel","environmentName","span","data-nextjs-environment-name-label"],"mappings":";;;;;;;;;;;;;;;IAQaA,6BAA6B;eAA7BA;;IARGC,oBAAoB;eAApBA;;;;AAAT,SAASA,qBAAqB,KAIpC;IAJoC,IAAA,EACnCC,eAAe,EAGhB,GAJoC;IAKnC,qBAAO,qBAACC;QAAKC,oCAAkC;kBAAEF;;AACnD;AAEO,MAAMF,gCAAiC"}

View File

@@ -0,0 +1,7 @@
export type ErrorMessageType = React.ReactNode;
type ErrorMessageProps = {
errorMessage: ErrorMessageType;
};
export declare function ErrorMessage({ errorMessage }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;
export declare const styles = "\n .nextjs__container_errors_wrapper {\n position: relative;\n }\n\n .nextjs__container_errors_desc {\n margin: 0;\n margin-left: 4px;\n color: var(--color-red-900);\n font-weight: 500;\n font-size: var(--size-16);\n letter-spacing: -0.32px;\n line-height: var(--size-24);\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n\n .nextjs__container_errors_desc.truncated {\n max-height: 200px;\n overflow: hidden;\n }\n\n .nextjs__container_errors_gradient_overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 85px;\n background: linear-gradient(\n 180deg,\n rgba(250, 250, 250, 0) 0%,\n var(--color-background-100) 100%\n );\n }\n\n .nextjs__container_errors_expand_button {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n padding: 6px 8px;\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n border-radius: 999px;\n box-shadow:\n 0px 2px 2px var(--color-gray-alpha-100),\n 0px 8px 8px -8px var(--color-gray-alpha-100);\n font-size: var(--size-13);\n cursor: pointer;\n color: var(--color-gray-900);\n font-weight: 500;\n transition: background-color 0.2s ease;\n }\n\n .nextjs__container_errors_expand_button:hover {\n background: var(--color-gray-100);\n }\n";
export {};

View File

@@ -0,0 +1,71 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
ErrorMessage: null,
styles: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ErrorMessage: function() {
return ErrorMessage;
},
styles: function() {
return styles;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
function ErrorMessage(param) {
let { errorMessage } = param;
const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
const [shouldTruncate, setShouldTruncate] = (0, _react.useState)(false);
const messageRef = (0, _react.useRef)(null);
(0, _react.useLayoutEffect)(()=>{
if (messageRef.current) {
setShouldTruncate(messageRef.current.scrollHeight > 200);
}
}, [
errorMessage
]);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "nextjs__container_errors_wrapper",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
ref: messageRef,
id: "nextjs__container_errors_desc",
className: "nextjs__container_errors_desc " + (shouldTruncate && !isExpanded ? 'truncated' : ''),
children: errorMessage
}),
shouldTruncate && !isExpanded && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "nextjs__container_errors_gradient_overlay"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
onClick: ()=>setIsExpanded(true),
className: "nextjs__container_errors_expand_button",
"aria-expanded": isExpanded,
"aria-controls": "nextjs__container_errors_desc",
children: "Show More"
})
]
})
]
});
}
const styles = "\n .nextjs__container_errors_wrapper {\n position: relative;\n }\n\n .nextjs__container_errors_desc {\n margin: 0;\n margin-left: 4px;\n color: var(--color-red-900);\n font-weight: 500;\n font-size: var(--size-16);\n letter-spacing: -0.32px;\n line-height: var(--size-24);\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n\n .nextjs__container_errors_desc.truncated {\n max-height: 200px;\n overflow: hidden;\n }\n\n .nextjs__container_errors_gradient_overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 85px;\n background: linear-gradient(\n 180deg,\n rgba(250, 250, 250, 0) 0%,\n var(--color-background-100) 100%\n );\n }\n\n .nextjs__container_errors_expand_button {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n padding: 6px 8px;\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n border-radius: 999px;\n box-shadow:\n 0px 2px 2px var(--color-gray-alpha-100),\n 0px 8px 8px -8px var(--color-gray-alpha-100);\n font-size: var(--size-13);\n cursor: pointer;\n color: var(--color-gray-900);\n font-weight: 500;\n transition: background-color 0.2s ease;\n }\n\n .nextjs__container_errors_expand_button:hover {\n background: var(--color-gray-100);\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=error-message.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-message/error-message.tsx"],"sourcesContent":["import { useState, useRef, useLayoutEffect } from 'react'\n\nexport type ErrorMessageType = React.ReactNode\n\ntype ErrorMessageProps = {\n errorMessage: ErrorMessageType\n}\n\nexport function ErrorMessage({ errorMessage }: ErrorMessageProps) {\n const [isExpanded, setIsExpanded] = useState(false)\n const [shouldTruncate, setShouldTruncate] = useState(false)\n const messageRef = useRef<HTMLParagraphElement>(null)\n\n useLayoutEffect(() => {\n if (messageRef.current) {\n setShouldTruncate(messageRef.current.scrollHeight > 200)\n }\n }, [errorMessage])\n\n return (\n <div className=\"nextjs__container_errors_wrapper\">\n <p\n ref={messageRef}\n id=\"nextjs__container_errors_desc\"\n className={`nextjs__container_errors_desc ${shouldTruncate && !isExpanded ? 'truncated' : ''}`}\n >\n {errorMessage}\n </p>\n {shouldTruncate && !isExpanded && (\n <>\n <div className=\"nextjs__container_errors_gradient_overlay\" />\n <button\n onClick={() => setIsExpanded(true)}\n className=\"nextjs__container_errors_expand_button\"\n aria-expanded={isExpanded}\n aria-controls=\"nextjs__container_errors_desc\"\n >\n Show More\n </button>\n </>\n )}\n </div>\n )\n}\n\nexport const styles = `\n .nextjs__container_errors_wrapper {\n position: relative;\n }\n\n .nextjs__container_errors_desc {\n margin: 0;\n margin-left: 4px;\n color: var(--color-red-900);\n font-weight: 500;\n font-size: var(--size-16);\n letter-spacing: -0.32px;\n line-height: var(--size-24);\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n\n .nextjs__container_errors_desc.truncated {\n max-height: 200px;\n overflow: hidden;\n }\n\n .nextjs__container_errors_gradient_overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 85px;\n background: linear-gradient(\n 180deg,\n rgba(250, 250, 250, 0) 0%,\n var(--color-background-100) 100%\n );\n }\n\n .nextjs__container_errors_expand_button {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n padding: 6px 8px;\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n border-radius: 999px;\n box-shadow:\n 0px 2px 2px var(--color-gray-alpha-100),\n 0px 8px 8px -8px var(--color-gray-alpha-100);\n font-size: var(--size-13);\n cursor: pointer;\n color: var(--color-gray-900);\n font-weight: 500;\n transition: background-color 0.2s ease;\n }\n\n .nextjs__container_errors_expand_button:hover {\n background: var(--color-gray-100);\n }\n`\n"],"names":["ErrorMessage","styles","errorMessage","isExpanded","setIsExpanded","useState","shouldTruncate","setShouldTruncate","messageRef","useRef","useLayoutEffect","current","scrollHeight","div","className","p","ref","id","button","onClick","aria-expanded","aria-controls"],"mappings":";;;;;;;;;;;;;;;IAQgBA,YAAY;eAAZA;;IAqCHC,MAAM;eAANA;;;;uBA7CqC;AAQ3C,SAASD,aAAa,KAAmC;IAAnC,IAAA,EAAEE,YAAY,EAAqB,GAAnC;IAC3B,MAAM,CAACC,YAAYC,cAAc,GAAGC,IAAAA,eAAQ,EAAC;IAC7C,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGF,IAAAA,eAAQ,EAAC;IACrD,MAAMG,aAAaC,IAAAA,aAAM,EAAuB;IAEhDC,IAAAA,sBAAe,EAAC;QACd,IAAIF,WAAWG,OAAO,EAAE;YACtBJ,kBAAkBC,WAAWG,OAAO,CAACC,YAAY,GAAG;QACtD;IACF,GAAG;QAACV;KAAa;IAEjB,qBACE,sBAACW;QAAIC,WAAU;;0BACb,qBAACC;gBACCC,KAAKR;gBACLS,IAAG;gBACHH,WAAW,AAAC,mCAAgCR,CAAAA,kBAAkB,CAACH,aAAa,cAAc,EAAC;0BAE1FD;;YAEFI,kBAAkB,CAACH,4BAClB;;kCACE,qBAACU;wBAAIC,WAAU;;kCACf,qBAACI;wBACCC,SAAS,IAAMf,cAAc;wBAC7BU,WAAU;wBACVM,iBAAejB;wBACfkB,iBAAc;kCACf;;;;;;AAOX;AAEO,MAAMpB,SAAU"}

View File

@@ -0,0 +1,5 @@
export declare function ErrorOverlayBottomStack({ errorCount, activeIdx, }: {
errorCount: number;
activeIdx: number;
}): import("react/jsx-runtime").JSX.Element;
export declare const styles = "\n .error-overlay-bottom-stack-layer {\n width: 100%;\n height: var(--stack-layer-height);\n position: relative;\n border: 1px solid var(--color-gray-400);\n border-radius: var(--rounded-xl);\n background: var(--color-background-200);\n transition:\n translate 350ms var(--timing-swift),\n box-shadow 350ms var(--timing-swift);\n }\n\n .error-overlay-bottom-stack-layer-1 {\n width: calc(100% - var(--size-24));\n }\n\n .error-overlay-bottom-stack-layer-2 {\n width: calc(100% - var(--size-48));\n z-index: -1;\n }\n\n .error-overlay-bottom-stack {\n width: 100%;\n position: absolute;\n bottom: -1px;\n height: 0;\n overflow: visible;\n }\n\n .error-overlay-bottom-stack-stack {\n --stack-layer-height: 44px;\n --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n --stack-layer-trim: 13px;\n --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n 0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n 0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n display: grid;\n place-items: center center;\n width: 100%;\n position: fixed;\n overflow: hidden;\n z-index: -1;\n max-width: var(--next-dialog-max-width);\n\n .error-overlay-bottom-stack-layer {\n grid-area: 1 / 1;\n /* Hide */\n translate: 0 calc(var(--stack-layer-height) * -1);\n }\n\n &[data-stack-count='1'],\n &[data-stack-count='2'] {\n .error-overlay-bottom-stack-layer-1 {\n translate: 0\n calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n }\n }\n\n &[data-stack-count='2'] {\n .error-overlay-bottom-stack-layer-2 {\n translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n }\n }\n\n /* Only the bottom stack should have the shadow */\n &[data-stack-count='1'] .error-overlay-bottom-stack-layer-1 {\n box-shadow: var(--shadow);\n }\n\n &[data-stack-count='2'] {\n .error-overlay-bottom-stack-layer-2 {\n box-shadow: var(--shadow);\n }\n }\n }\n";

View File

@@ -0,0 +1,55 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
ErrorOverlayBottomStack: null,
styles: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ErrorOverlayBottomStack: function() {
return ErrorOverlayBottomStack;
},
styles: function() {
return styles;
}
});
const _jsxruntime = require("react/jsx-runtime");
function ErrorOverlayBottomStack(param) {
let { errorCount, activeIdx } = param;
// If there are more than 2 errors to navigate, the stack count should remain at 2.
const stackCount = Math.min(errorCount - activeIdx - 1, 2);
return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
"aria-hidden": true,
className: "error-overlay-bottom-stack",
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "error-overlay-bottom-stack-stack",
"data-stack-count": stackCount,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "error-overlay-bottom-stack-layer error-overlay-bottom-stack-layer-1",
children: "1"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: "error-overlay-bottom-stack-layer error-overlay-bottom-stack-layer-2",
children: "2"
})
]
})
});
}
const styles = "\n .error-overlay-bottom-stack-layer {\n width: 100%;\n height: var(--stack-layer-height);\n position: relative;\n border: 1px solid var(--color-gray-400);\n border-radius: var(--rounded-xl);\n background: var(--color-background-200);\n transition:\n translate 350ms var(--timing-swift),\n box-shadow 350ms var(--timing-swift);\n }\n\n .error-overlay-bottom-stack-layer-1 {\n width: calc(100% - var(--size-24));\n }\n\n .error-overlay-bottom-stack-layer-2 {\n width: calc(100% - var(--size-48));\n z-index: -1;\n }\n\n .error-overlay-bottom-stack {\n width: 100%;\n position: absolute;\n bottom: -1px;\n height: 0;\n overflow: visible;\n }\n\n .error-overlay-bottom-stack-stack {\n --stack-layer-height: 44px;\n --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n --stack-layer-trim: 13px;\n --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n 0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n 0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n display: grid;\n place-items: center center;\n width: 100%;\n position: fixed;\n overflow: hidden;\n z-index: -1;\n max-width: var(--next-dialog-max-width);\n\n .error-overlay-bottom-stack-layer {\n grid-area: 1 / 1;\n /* Hide */\n translate: 0 calc(var(--stack-layer-height) * -1);\n }\n\n &[data-stack-count='1'],\n &[data-stack-count='2'] {\n .error-overlay-bottom-stack-layer-1 {\n translate: 0\n calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n }\n }\n\n &[data-stack-count='2'] {\n .error-overlay-bottom-stack-layer-2 {\n translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n }\n }\n\n /* Only the bottom stack should have the shadow */\n &[data-stack-count='1'] .error-overlay-bottom-stack-layer-1 {\n box-shadow: var(--shadow);\n }\n\n &[data-stack-count='2'] {\n .error-overlay-bottom-stack-layer-2 {\n box-shadow: var(--shadow);\n }\n }\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.tsx"],"sourcesContent":["export function ErrorOverlayBottomStack({\n errorCount,\n activeIdx,\n}: {\n errorCount: number\n activeIdx: number\n}) {\n // If there are more than 2 errors to navigate, the stack count should remain at 2.\n const stackCount = Math.min(errorCount - activeIdx - 1, 2)\n return (\n <div aria-hidden className=\"error-overlay-bottom-stack\">\n <div\n className=\"error-overlay-bottom-stack-stack\"\n data-stack-count={stackCount}\n >\n <div className=\"error-overlay-bottom-stack-layer error-overlay-bottom-stack-layer-1\">\n 1\n </div>\n <div className=\"error-overlay-bottom-stack-layer error-overlay-bottom-stack-layer-2\">\n 2\n </div>\n </div>\n </div>\n )\n}\n\nexport const styles = `\n .error-overlay-bottom-stack-layer {\n width: 100%;\n height: var(--stack-layer-height);\n position: relative;\n border: 1px solid var(--color-gray-400);\n border-radius: var(--rounded-xl);\n background: var(--color-background-200);\n transition:\n translate 350ms var(--timing-swift),\n box-shadow 350ms var(--timing-swift);\n }\n\n .error-overlay-bottom-stack-layer-1 {\n width: calc(100% - var(--size-24));\n }\n\n .error-overlay-bottom-stack-layer-2 {\n width: calc(100% - var(--size-48));\n z-index: -1;\n }\n\n .error-overlay-bottom-stack {\n width: 100%;\n position: absolute;\n bottom: -1px;\n height: 0;\n overflow: visible;\n }\n\n .error-overlay-bottom-stack-stack {\n --stack-layer-height: 44px;\n --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n --stack-layer-trim: 13px;\n --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n 0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n 0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n display: grid;\n place-items: center center;\n width: 100%;\n position: fixed;\n overflow: hidden;\n z-index: -1;\n max-width: var(--next-dialog-max-width);\n\n .error-overlay-bottom-stack-layer {\n grid-area: 1 / 1;\n /* Hide */\n translate: 0 calc(var(--stack-layer-height) * -1);\n }\n\n &[data-stack-count='1'],\n &[data-stack-count='2'] {\n .error-overlay-bottom-stack-layer-1 {\n translate: 0\n calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n }\n }\n\n &[data-stack-count='2'] {\n .error-overlay-bottom-stack-layer-2 {\n translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n }\n }\n\n /* Only the bottom stack should have the shadow */\n &[data-stack-count='1'] .error-overlay-bottom-stack-layer-1 {\n box-shadow: var(--shadow);\n }\n\n &[data-stack-count='2'] {\n .error-overlay-bottom-stack-layer-2 {\n box-shadow: var(--shadow);\n }\n }\n }\n`\n"],"names":["ErrorOverlayBottomStack","styles","errorCount","activeIdx","stackCount","Math","min","div","aria-hidden","className","data-stack-count"],"mappings":";;;;;;;;;;;;;;;IAAgBA,uBAAuB;eAAvBA;;IA0BHC,MAAM;eAANA;;;;AA1BN,SAASD,wBAAwB,KAMvC;IANuC,IAAA,EACtCE,UAAU,EACVC,SAAS,EAIV,GANuC;IAOtC,mFAAmF;IACnF,MAAMC,aAAaC,KAAKC,GAAG,CAACJ,aAAaC,YAAY,GAAG;IACxD,qBACE,qBAACI;QAAIC,aAAW;QAACC,WAAU;kBACzB,cAAA,sBAACF;YACCE,WAAU;YACVC,oBAAkBN;;8BAElB,qBAACG;oBAAIE,WAAU;8BAAsE;;8BAGrF,qBAACF;oBAAIE,WAAU;8BAAsE;;;;;AAM7F;AAEO,MAAMR,SAAU"}

View File

@@ -0,0 +1,7 @@
interface ErrorFeedbackProps {
errorCode: string;
className?: string;
}
export declare function ErrorFeedback({ errorCode, className }: ErrorFeedbackProps): import("react/jsx-runtime").JSX.Element;
export declare const styles = "\n .error-feedback {\n display: flex;\n align-items: center;\n gap: 8px;\n white-space: nowrap;\n color: var(--color-gray-900);\n }\n\n .error-feedback-thanks {\n height: var(--size-24);\n display: flex;\n align-items: center;\n padding-right: 4px; /* To match the 4px inner padding of the thumbs up and down icons */\n }\n\n .feedback-button {\n background: none;\n border: none;\n border-radius: var(--rounded-md);\n width: var(--size-24);\n height: var(--size-24);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n &:focus {\n outline: var(--focus-ring);\n }\n\n &:hover {\n background: var(--color-gray-alpha-100);\n }\n\n &:active {\n background: var(--color-gray-alpha-200);\n }\n }\n\n .feedback-button[aria-disabled='true'] {\n opacity: 0.7;\n cursor: not-allowed;\n }\n\n .feedback-button.voted {\n background: var(--color-gray-alpha-200);\n }\n\n .thumbs-up-icon,\n .thumbs-down-icon {\n color: var(--color-gray-900);\n width: var(--size-16);\n height: var(--size-16);\n }\n";
export {};

View File

@@ -0,0 +1,112 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
ErrorFeedback: null,
styles: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ErrorFeedback: function() {
return ErrorFeedback;
},
styles: function() {
return styles;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _thumbsup = require("../../../../icons/thumbs/thumbs-up");
const _thumbsdown = require("../../../../icons/thumbs/thumbs-down");
const _cx = require("../../../../utils/cx");
function ErrorFeedback(param) {
let { errorCode, className } = param;
const [votedMap, setVotedMap] = (0, _react.useState)({});
const voted = votedMap[errorCode];
const hasVoted = voted !== undefined;
const disabled = process.env.__NEXT_TELEMETRY_DISABLED;
const handleFeedback = (0, _react.useCallback)(async (wasHelpful)=>{
// Optimistically set feedback state without loading/error states to keep implementation simple
setVotedMap((prev)=>({
...prev,
[errorCode]: wasHelpful
}));
try {
const response = await fetch((process.env.__NEXT_ROUTER_BASEPATH || '') + "/__nextjs_error_feedback?" + new URLSearchParams({
errorCode,
wasHelpful: wasHelpful.toString()
}));
if (!response.ok) {
// Handle non-2xx HTTP responses here if needed
console.error('Failed to record feedback on the server.');
}
} catch (error) {
console.error('Failed to record feedback:', error);
}
}, [
errorCode
]);
return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: (0, _cx.cx)('error-feedback', className),
role: "region",
"aria-label": "Error feedback",
children: hasVoted ? /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
className: "error-feedback-thanks",
role: "status",
"aria-live": "polite",
children: "Thanks for your feedback!"
}) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
href: "https://nextjs.org/telemetry#error-feedback",
rel: "noopener noreferrer",
target: "_blank",
children: "Was this helpful?"
})
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
"aria-disabled": disabled ? 'true' : undefined,
"aria-label": "Mark as helpful",
onClick: disabled ? undefined : ()=>handleFeedback(true),
className: (0, _cx.cx)('feedback-button', voted === true && 'voted'),
title: disabled ? 'Feedback disabled due to setting NEXT_TELEMETRY_DISABLED' : undefined,
type: "button",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_thumbsup.ThumbsUp, {
"aria-hidden": "true"
})
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
"aria-disabled": disabled ? 'true' : undefined,
"aria-label": "Mark as not helpful",
onClick: disabled ? undefined : ()=>handleFeedback(false),
className: (0, _cx.cx)('feedback-button', voted === false && 'voted'),
title: disabled ? 'Feedback disabled due to setting NEXT_TELEMETRY_DISABLED' : undefined,
type: "button",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_thumbsdown.ThumbsDown, {
"aria-hidden": "true",
// Optical alignment
style: {
translate: '1px 1px'
}
})
})
]
})
});
}
const styles = "\n .error-feedback {\n display: flex;\n align-items: center;\n gap: 8px;\n white-space: nowrap;\n color: var(--color-gray-900);\n }\n\n .error-feedback-thanks {\n height: var(--size-24);\n display: flex;\n align-items: center;\n padding-right: 4px; /* To match the 4px inner padding of the thumbs up and down icons */\n }\n\n .feedback-button {\n background: none;\n border: none;\n border-radius: var(--rounded-md);\n width: var(--size-24);\n height: var(--size-24);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n &:focus {\n outline: var(--focus-ring);\n }\n\n &:hover {\n background: var(--color-gray-alpha-100);\n }\n\n &:active {\n background: var(--color-gray-alpha-200);\n }\n }\n\n .feedback-button[aria-disabled='true'] {\n opacity: 0.7;\n cursor: not-allowed;\n }\n\n .feedback-button.voted {\n background: var(--color-gray-alpha-200);\n }\n\n .thumbs-up-icon,\n .thumbs-down-icon {\n color: var(--color-gray-900);\n width: var(--size-16);\n height: var(--size-16);\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=error-feedback.js.map

View File

@@ -0,0 +1,6 @@
export type ErrorOverlayFooterProps = {
errorCode: string | undefined;
footerMessage: string | undefined;
};
export declare function ErrorOverlayFooter({ errorCode, footerMessage, }: ErrorOverlayFooterProps): import("react/jsx-runtime").JSX.Element;
export declare const styles = "\n .error-overlay-footer {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n gap: 8px;\n padding: 12px;\n background: var(--color-background-200);\n border-top: 1px solid var(--color-gray-400);\n }\n\n .error-feedback {\n margin-left: auto;\n\n p {\n font-size: var(--size-14);\n font-weight: 500;\n margin: 0;\n }\n }\n\n .error-overlay-footer-message {\n color: var(--color-gray-900);\n margin: 0;\n font-size: var(--size-14);\n font-weight: 400;\n line-height: var(--size-20);\n }\n\n \n .error-feedback {\n display: flex;\n align-items: center;\n gap: 8px;\n white-space: nowrap;\n color: var(--color-gray-900);\n }\n\n .error-feedback-thanks {\n height: var(--size-24);\n display: flex;\n align-items: center;\n padding-right: 4px; /* To match the 4px inner padding of the thumbs up and down icons */\n }\n\n .feedback-button {\n background: none;\n border: none;\n border-radius: var(--rounded-md);\n width: var(--size-24);\n height: var(--size-24);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n &:focus {\n outline: var(--focus-ring);\n }\n\n &:hover {\n background: var(--color-gray-alpha-100);\n }\n\n &:active {\n background: var(--color-gray-alpha-200);\n }\n }\n\n .feedback-button[aria-disabled='true'] {\n opacity: 0.7;\n cursor: not-allowed;\n }\n\n .feedback-button.voted {\n background: var(--color-gray-alpha-200);\n }\n\n .thumbs-up-icon,\n .thumbs-down-icon {\n color: var(--color-gray-900);\n width: var(--size-16);\n height: var(--size-16);\n }\n\n";

View File

@@ -0,0 +1,49 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
ErrorOverlayFooter: null,
styles: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ErrorOverlayFooter: function() {
return ErrorOverlayFooter;
},
styles: function() {
return styles;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _errorfeedback = require("./error-feedback/error-feedback");
function ErrorOverlayFooter(param) {
let { errorCode, footerMessage } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("footer", {
className: "error-overlay-footer",
children: [
footerMessage ? /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
className: "error-overlay-footer-message",
children: footerMessage
}) : null,
errorCode ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_errorfeedback.ErrorFeedback, {
className: "error-feedback",
errorCode: errorCode
}) : null
]
});
}
const styles = "\n .error-overlay-footer {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n gap: 8px;\n padding: 12px;\n background: var(--color-background-200);\n border-top: 1px solid var(--color-gray-400);\n }\n\n .error-feedback {\n margin-left: auto;\n\n p {\n font-size: var(--size-14);\n font-weight: 500;\n margin: 0;\n }\n }\n\n .error-overlay-footer-message {\n color: var(--color-gray-900);\n margin: 0;\n font-size: var(--size-14);\n font-weight: 400;\n line-height: var(--size-20);\n }\n\n " + _errorfeedback.styles + "\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=error-overlay-footer.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-footer/error-overlay-footer.tsx"],"sourcesContent":["import { ErrorFeedback } from './error-feedback/error-feedback'\nimport { styles as feedbackStyles } from './error-feedback/error-feedback'\n\nexport type ErrorOverlayFooterProps = {\n errorCode: string | undefined\n footerMessage: string | undefined\n}\n\nexport function ErrorOverlayFooter({\n errorCode,\n footerMessage,\n}: ErrorOverlayFooterProps) {\n return (\n <footer className=\"error-overlay-footer\">\n {footerMessage ? (\n <p className=\"error-overlay-footer-message\">{footerMessage}</p>\n ) : null}\n {errorCode ? (\n <ErrorFeedback className=\"error-feedback\" errorCode={errorCode} />\n ) : null}\n </footer>\n )\n}\n\nexport const styles = `\n .error-overlay-footer {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n gap: 8px;\n padding: 12px;\n background: var(--color-background-200);\n border-top: 1px solid var(--color-gray-400);\n }\n\n .error-feedback {\n margin-left: auto;\n\n p {\n font-size: var(--size-14);\n font-weight: 500;\n margin: 0;\n }\n }\n\n .error-overlay-footer-message {\n color: var(--color-gray-900);\n margin: 0;\n font-size: var(--size-14);\n font-weight: 400;\n line-height: var(--size-20);\n }\n\n ${feedbackStyles}\n`\n"],"names":["ErrorOverlayFooter","styles","errorCode","footerMessage","footer","className","p","ErrorFeedback","feedbackStyles"],"mappings":";;;;;;;;;;;;;;;IAQgBA,kBAAkB;eAAlBA;;IAgBHC,MAAM;eAANA;;;;+BAxBiB;AAQvB,SAASD,mBAAmB,KAGT;IAHS,IAAA,EACjCE,SAAS,EACTC,aAAa,EACW,GAHS;IAIjC,qBACE,sBAACC;QAAOC,WAAU;;YACfF,8BACC,qBAACG;gBAAED,WAAU;0BAAgCF;iBAC3C;YACHD,0BACC,qBAACK,4BAAa;gBAACF,WAAU;gBAAiBH,WAAWA;iBACnD;;;AAGV;AAEO,MAAMD,SAAS,AAAC,4kBA8BnBO,qBAAc,GAAC"}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,135 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
ErrorOverlayLayout: null,
styles: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ErrorOverlayLayout: function() {
return ErrorOverlayLayout;
},
styles: function() {
return styles;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _jsxruntime = require("react/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _dialog = require("../../dialog");
const _erroroverlaytoolbar = require("../error-overlay-toolbar/error-overlay-toolbar");
const _erroroverlayfooter = require("../error-overlay-footer/error-overlay-footer");
const _errormessage = require("../error-message/error-message");
const _errortypelabel = require("../error-type-label/error-type-label");
const _erroroverlaynav = require("../error-overlay-nav/error-overlay-nav");
const _dialog1 = require("../dialog/dialog");
const _header = require("../dialog/header");
const _body = require("../dialog/body");
const _callstack = require("../call-stack/call-stack");
const _overlay = require("../overlay/overlay");
const _erroroverlaybottomstack = require("../error-overlay-bottom-stack");
const _environmentnamelabel = require("../environment-name-label/environment-name-label");
const _utils = require("../dev-tools-indicator/utils");
function ErrorOverlayLayout(param) {
let { errorMessage, errorType, children, errorCode, error, debugInfo, isBuildError, onClose, versionInfo, runtimeErrors, activeIdx, setActiveIndex, footerMessage, isTurbopack, dialogResizerRef, // This prop is used to animate the dialog, it comes from a parent component (<ErrorOverlay>)
// If it's not being passed, we should just render the component as it is being
// used without the context of a parent component that controls its state (e.g. Storybook).
rendered = true, transitionDurationMs } = param;
const animationProps = {
'data-rendered': rendered,
style: {
'--transition-duration': "" + transitionDurationMs + "ms"
}
};
const hasFooter = Boolean(footerMessage || errorCode);
const dialogRef = _react.useRef(null);
(0, _utils.useFocusTrap)(dialogRef, null, rendered);
var _runtimeErrors_length;
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_overlay.ErrorOverlayOverlay, {
fixed: isBuildError,
...animationProps,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
"data-nextjs-dialog-root": true,
ref: dialogRef,
...animationProps,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_dialog1.ErrorOverlayDialog, {
onClose: onClose,
dialogResizerRef: dialogResizerRef,
"data-has-footer": hasFooter,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_dialog.DialogContent, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_header.ErrorOverlayDialogHeader, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "nextjs__container_errors__error_title",
// allow assertion in tests before error rating is implemented
"data-nextjs-error-code": errorCode,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
"data-nextjs-error-label-group": true,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_errortypelabel.ErrorTypeLabel, {
errorType: errorType
}),
error.environmentName && /*#__PURE__*/ (0, _jsxruntime.jsx)(_environmentnamelabel.EnvironmentNameLabel, {
environmentName: error.environmentName
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_erroroverlaytoolbar.ErrorOverlayToolbar, {
error: error,
debugInfo: debugInfo
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_errormessage.ErrorMessage, {
errorMessage: errorMessage
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_body.ErrorOverlayDialogBody, {
children: children
})
]
}),
hasFooter && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dialog.DialogFooter, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_erroroverlayfooter.ErrorOverlayFooter, {
footerMessage: footerMessage,
errorCode: errorCode
})
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_erroroverlaybottomstack.ErrorOverlayBottomStack, {
errorCount: (_runtimeErrors_length = runtimeErrors == null ? void 0 : runtimeErrors.length) != null ? _runtimeErrors_length : 0,
activeIdx: activeIdx != null ? activeIdx : 0
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_erroroverlaynav.ErrorOverlayNav, {
runtimeErrors: runtimeErrors,
activeIdx: activeIdx,
setActiveIndex: setActiveIndex,
versionInfo: versionInfo,
isTurbopack: isTurbopack
})
]
})
});
}
const styles = "\n " + _overlay.OVERLAY_STYLES + "\n " + _dialog1.DIALOG_STYLES + "\n " + _header.DIALOG_HEADER_STYLES + "\n " + _body.DIALOG_BODY_STYLES + "\n\n " + _erroroverlaynav.styles + "\n " + _errortypelabel.styles + "\n " + _errormessage.styles + "\n " + _erroroverlaytoolbar.styles + "\n " + _callstack.CALL_STACK_STYLES + "\n\n [data-nextjs-error-label-group] {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=error-overlay-layout.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,12 @@
import type { VersionInfo } from '../../../../../../../server/dev/parse-version-info';
import type { ReadyRuntimeError } from '../../../../utils/get-error-by-type';
type ErrorOverlayNavProps = {
runtimeErrors?: ReadyRuntimeError[];
activeIdx?: number;
setActiveIndex?: (index: number) => void;
versionInfo?: VersionInfo;
isTurbopack?: boolean;
};
export declare function ErrorOverlayNav({ runtimeErrors, activeIdx, setActiveIndex, versionInfo, isTurbopack, }: ErrorOverlayNavProps): import("react/jsx-runtime").JSX.Element;
export declare const styles = "\n [data-nextjs-error-overlay-nav] {\n --notch-height: 2.625rem; /* 42px */\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n width: 100%;\n\n outline: none;\n translate: 1px 1px;\n max-width: var(--next-dialog-max-width);\n\n .error-overlay-notch {\n --stroke-color: var(--color-gray-400);\n --background-color: var(--color-background-100);\n\n translate: -1px 0;\n width: auto;\n height: var(--notch-height);\n padding: 12px;\n background: var(--background-color);\n border: 1px solid var(--stroke-color);\n border-bottom: none;\n position: relative;\n\n &[data-side='left'] {\n padding-right: 0;\n border-radius: var(--rounded-xl) 0 0 0;\n\n .error-overlay-notch-tail {\n right: -54px;\n }\n\n > *:not(.error-overlay-notch-tail) {\n margin-right: -10px;\n }\n }\n\n &[data-side='right'] {\n padding-left: 0;\n border-radius: 0 var(--rounded-xl) 0 0;\n\n .error-overlay-notch-tail {\n left: -54px;\n transform: rotateY(180deg);\n }\n\n > *:not(.error-overlay-notch-tail) {\n margin-left: -12px;\n }\n }\n\n .error-overlay-notch-tail {\n position: absolute;\n top: -1px;\n pointer-events: none;\n z-index: -1;\n height: calc(100% + 1px);\n }\n }\n }\n";
export {};

View File

@@ -0,0 +1,158 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
ErrorOverlayNav: null,
styles: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ErrorOverlayNav: function() {
return ErrorOverlayNav;
},
styles: function() {
return styles;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _erroroverlaypagination = require("../error-overlay-pagination/error-overlay-pagination");
const _versionstalenessinfo = require("../../version-staleness-info/version-staleness-info");
function ErrorOverlayNav(param) {
let { runtimeErrors, activeIdx, setActiveIndex, versionInfo, isTurbopack } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
"data-nextjs-error-overlay-nav": true,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(Notch, {
side: "left",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_erroroverlaypagination.ErrorOverlayPagination, {
runtimeErrors: runtimeErrors != null ? runtimeErrors : [],
activeIdx: activeIdx != null ? activeIdx : 0,
onActiveIndexChange: setActiveIndex != null ? setActiveIndex : ()=>{}
})
}),
versionInfo && /*#__PURE__*/ (0, _jsxruntime.jsx)(Notch, {
side: "right",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_versionstalenessinfo.VersionStalenessInfo, {
versionInfo: versionInfo,
isTurbopack: isTurbopack
})
})
]
});
}
const styles = "\n [data-nextjs-error-overlay-nav] {\n --notch-height: 2.625rem; /* 42px */\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n width: 100%;\n\n outline: none;\n translate: 1px 1px;\n max-width: var(--next-dialog-max-width);\n\n .error-overlay-notch {\n --stroke-color: var(--color-gray-400);\n --background-color: var(--color-background-100);\n\n translate: -1px 0;\n width: auto;\n height: var(--notch-height);\n padding: 12px;\n background: var(--background-color);\n border: 1px solid var(--stroke-color);\n border-bottom: none;\n position: relative;\n\n &[data-side='left'] {\n padding-right: 0;\n border-radius: var(--rounded-xl) 0 0 0;\n\n .error-overlay-notch-tail {\n right: -54px;\n }\n\n > *:not(.error-overlay-notch-tail) {\n margin-right: -10px;\n }\n }\n\n &[data-side='right'] {\n padding-left: 0;\n border-radius: 0 var(--rounded-xl) 0 0;\n\n .error-overlay-notch-tail {\n left: -54px;\n transform: rotateY(180deg);\n }\n\n > *:not(.error-overlay-notch-tail) {\n margin-left: -12px;\n }\n }\n\n .error-overlay-notch-tail {\n position: absolute;\n top: -1px;\n pointer-events: none;\n z-index: -1;\n height: calc(100% + 1px);\n }\n }\n }\n";
function Notch(param) {
let { children, side = 'left' } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "error-overlay-notch",
"data-side": side,
children: [
children,
/*#__PURE__*/ (0, _jsxruntime.jsx)(Tail, {})
]
});
}
function Tail() {
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("svg", {
width: "60",
height: "42",
viewBox: "0 0 60 42",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
className: "error-overlay-notch-tail",
preserveAspectRatio: "none",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("mask", {
id: "error_overlay_nav_mask0_2667_14687",
style: {
maskType: 'alpha'
},
maskUnits: "userSpaceOnUse",
x: "0",
y: "-1",
width: "60",
height: "43",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("mask", {
id: "error_overlay_nav_path_1_outside_1_2667_14687",
maskUnits: "userSpaceOnUse",
x: "0",
y: "-1",
width: "60",
height: "43",
fill: "black",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("rect", {
fill: "white",
y: "-1",
width: "60",
height: "43"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
d: "M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z"
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
d: "M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z",
fill: "white"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
d: "M1 0V-1H0V0L1 0ZM1 41H0V42H1V41ZM34.8889 29.6498L33.9873 30.0823L34.8889 29.6498ZM26.111 11.3501L27.0127 10.9177L26.111 11.3501ZM1 1H8.0783V-1H1V1ZM60 40H1V42H60V40ZM2 41V0L0 0L0 41H2ZM25.2094 11.7826L33.9873 30.0823L35.7906 29.2174L27.0127 10.9177L25.2094 11.7826ZM52.9217 42H60V40H52.9217V42ZM33.9873 30.0823C37.4811 37.3661 44.8433 42 52.9217 42V40C45.6127 40 38.9517 35.8074 35.7906 29.2174L33.9873 30.0823ZM8.0783 1C15.3873 1 22.0483 5.19257 25.2094 11.7826L27.0127 10.9177C23.5188 3.6339 16.1567 -1 8.0783 -1V1Z",
fill: "black",
mask: "url(#error_overlay_nav_path_1_outside_1_2667_14687)"
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("g", {
mask: "url(#error_overlay_nav_mask0_2667_14687)",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("mask", {
id: "error_overlay_nav_path_3_outside_2_2667_14687",
maskUnits: "userSpaceOnUse",
x: "-1",
y: "0.0244141",
width: "60",
height: "43",
fill: "black",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("rect", {
fill: "white",
x: "-1",
y: "0.0244141",
width: "60",
height: "43"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
d: "M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z"
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
d: "M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z",
fill: "var(--background-color)"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
d: "M0 1.02441L0 0.0244141H-1V1.02441H0ZM0 42.0244H-1V43.0244H0L0 42.0244ZM33.8889 30.6743L32.9873 31.1068L33.8889 30.6743ZM25.111 12.3746L26.0127 11.9421L25.111 12.3746ZM0 2.02441H7.0783V0.0244141H0L0 2.02441ZM59 41.0244H0L0 43.0244H59V41.0244ZM1 42.0244L1 1.02441H-1L-1 42.0244H1ZM24.2094 12.8071L32.9873 31.1068L34.7906 30.2418L26.0127 11.9421L24.2094 12.8071ZM51.9217 43.0244H59V41.0244H51.9217V43.0244ZM32.9873 31.1068C36.4811 38.3905 43.8433 43.0244 51.9217 43.0244V41.0244C44.6127 41.0244 37.9517 36.8318 34.7906 30.2418L32.9873 31.1068ZM7.0783 2.02441C14.3873 2.02441 21.0483 6.21699 24.2094 12.8071L26.0127 11.9421C22.5188 4.65831 15.1567 0.0244141 7.0783 0.0244141V2.02441Z",
fill: "var(--stroke-color)",
mask: "url(#error_overlay_nav_path_3_outside_2_2667_14687)"
})
]
})
]
});
}
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=error-overlay-nav.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,9 @@
import type { ReadyRuntimeError } from '../../../../utils/get-error-by-type';
type ErrorPaginationProps = {
runtimeErrors: ReadyRuntimeError[];
activeIdx: number;
onActiveIndexChange: (index: number) => void;
};
export declare function ErrorOverlayPagination({ runtimeErrors, activeIdx, onActiveIndexChange, }: ErrorPaginationProps): import("react/jsx-runtime").JSX.Element;
export declare const styles = "\n .error-overlay-pagination {\n -webkit-font-smoothing: antialiased;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n width: fit-content;\n }\n\n .error-overlay-pagination-count {\n color: var(--color-gray-900);\n text-align: center;\n font-size: var(--size-14);\n font-weight: 500;\n line-height: var(--size-16);\n font-variant-numeric: tabular-nums;\n }\n\n .error-overlay-pagination-button {\n display: flex;\n justify-content: center;\n align-items: center;\n\n width: var(--size-24);\n height: var(--size-24);\n background: var(--color-gray-300);\n flex-shrink: 0;\n\n border: none;\n border-radius: var(--rounded-full);\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n\n &:focus-visible {\n outline: var(--focus-ring);\n }\n\n &:not(:disabled):active {\n background: var(--color-gray-500);\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n\n .error-overlay-pagination-button-icon {\n color: var(--color-gray-1000);\n }\n";
export {};

View File

@@ -0,0 +1,167 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
ErrorOverlayPagination: null,
styles: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ErrorOverlayPagination: function() {
return ErrorOverlayPagination;
},
styles: function() {
return styles;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _leftarrow = require("../../../icons/left-arrow");
const _rightarrow = require("../../../icons/right-arrow");
function ErrorOverlayPagination(param) {
let { runtimeErrors, activeIdx, onActiveIndexChange } = param;
const handlePrevious = (0, _react.useCallback)(()=>(0, _react.startTransition)(()=>{
if (activeIdx > 0) {
onActiveIndexChange(Math.max(0, activeIdx - 1));
}
}), [
activeIdx,
onActiveIndexChange
]);
const handleNext = (0, _react.useCallback)(()=>(0, _react.startTransition)(()=>{
if (activeIdx < runtimeErrors.length - 1) {
onActiveIndexChange(Math.max(0, Math.min(runtimeErrors.length - 1, activeIdx + 1)));
}
}), [
activeIdx,
runtimeErrors.length,
onActiveIndexChange
]);
const buttonLeft = (0, _react.useRef)(null);
const buttonRight = (0, _react.useRef)(null);
const [nav, setNav] = (0, _react.useState)(null);
const onNav = (0, _react.useCallback)((el)=>{
setNav(el);
}, []);
(0, _react.useEffect)(()=>{
if (nav == null) {
return;
}
const root = nav.getRootNode();
const d = self.document;
function handler(e) {
if (e.key === 'ArrowLeft') {
e.preventDefault();
e.stopPropagation();
handlePrevious && handlePrevious();
} else if (e.key === 'ArrowRight') {
e.preventDefault();
e.stopPropagation();
handleNext && handleNext();
}
}
root.addEventListener('keydown', handler);
if (root !== d) {
d.addEventListener('keydown', handler);
}
return function() {
root.removeEventListener('keydown', handler);
if (root !== d) {
d.removeEventListener('keydown', handler);
}
};
}, [
nav,
handleNext,
handlePrevious
]);
// Unlock focus for browsers like Firefox, that break all user focus if the
// currently focused item becomes disabled.
(0, _react.useEffect)(()=>{
if (nav == null) {
return;
}
const root = nav.getRootNode();
// Always true, but we do this for TypeScript:
if (root instanceof ShadowRoot) {
const a = root.activeElement;
if (activeIdx === 0) {
if (buttonLeft.current && a === buttonLeft.current) {
buttonLeft.current.blur();
}
} else if (activeIdx === runtimeErrors.length - 1) {
if (buttonRight.current && a === buttonRight.current) {
buttonRight.current.blur();
}
}
}
}, [
nav,
activeIdx,
runtimeErrors.length
]);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("nav", {
className: "error-overlay-pagination dialog-exclude-closing-from-outside-click",
ref: onNav,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
ref: buttonLeft,
type: "button",
disabled: activeIdx === 0,
"aria-disabled": activeIdx === 0,
onClick: handlePrevious,
"data-nextjs-dialog-error-previous": true,
className: "error-overlay-pagination-button",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_leftarrow.LeftArrow, {
title: "previous",
className: "error-overlay-pagination-button-icon"
})
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "error-overlay-pagination-count",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
"data-nextjs-dialog-error-index": activeIdx,
children: [
activeIdx + 1,
"/"
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
"data-nextjs-dialog-header-total-count": true,
children: runtimeErrors.length || 1
})
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
ref: buttonRight,
type: "button",
// If no errors or the last error is active, disable the button.
disabled: activeIdx >= runtimeErrors.length - 1,
"aria-disabled": activeIdx >= runtimeErrors.length - 1,
onClick: handleNext,
"data-nextjs-dialog-error-next": true,
className: "error-overlay-pagination-button",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_rightarrow.RightArrow, {
title: "next",
className: "error-overlay-pagination-button-icon"
})
})
]
});
}
const styles = "\n .error-overlay-pagination {\n -webkit-font-smoothing: antialiased;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n width: fit-content;\n }\n\n .error-overlay-pagination-count {\n color: var(--color-gray-900);\n text-align: center;\n font-size: var(--size-14);\n font-weight: 500;\n line-height: var(--size-16);\n font-variant-numeric: tabular-nums;\n }\n\n .error-overlay-pagination-button {\n display: flex;\n justify-content: center;\n align-items: center;\n\n width: var(--size-24);\n height: var(--size-24);\n background: var(--color-gray-300);\n flex-shrink: 0;\n\n border: none;\n border-radius: var(--rounded-full);\n\n svg {\n width: var(--size-16);\n height: var(--size-16);\n }\n\n &:focus-visible {\n outline: var(--focus-ring);\n }\n\n &:not(:disabled):active {\n background: var(--color-gray-500);\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n\n .error-overlay-pagination-button-icon {\n color: var(--color-gray-1000);\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=error-overlay-pagination.js.map

View File

@@ -0,0 +1,3 @@
export declare function CopyStackTraceButton({ error }: {
error: Error;
}): import("react/jsx-runtime").JSX.Element;

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CopyStackTraceButton", {
enumerable: true,
get: function() {
return CopyStackTraceButton;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _copybutton = require("../../copy-button");
function CopyStackTraceButton(param) {
let { error } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_copybutton.CopyButton, {
"data-nextjs-data-runtime-error-copy-stack": true,
className: "copy-stack-trace-button",
actionLabel: "Copy Stack Trace",
successLabel: "Stack Trace Copied",
content: error.stack || '',
disabled: !error.stack
});
}
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=copy-stack-trace-button.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-toolbar/copy-stack-trace-button.tsx"],"sourcesContent":["import { CopyButton } from '../../copy-button'\n\nexport function CopyStackTraceButton({ error }: { error: Error }) {\n return (\n <CopyButton\n data-nextjs-data-runtime-error-copy-stack\n className=\"copy-stack-trace-button\"\n actionLabel=\"Copy Stack Trace\"\n successLabel=\"Stack Trace Copied\"\n content={error.stack || ''}\n disabled={!error.stack}\n />\n )\n}\n"],"names":["CopyStackTraceButton","error","CopyButton","data-nextjs-data-runtime-error-copy-stack","className","actionLabel","successLabel","content","stack","disabled"],"mappings":";;;;+BAEgBA;;;eAAAA;;;;4BAFW;AAEpB,SAASA,qBAAqB,KAA2B;IAA3B,IAAA,EAAEC,KAAK,EAAoB,GAA3B;IACnC,qBACE,qBAACC,sBAAU;QACTC,2CAAyC;QACzCC,WAAU;QACVC,aAAY;QACZC,cAAa;QACbC,SAASN,MAAMO,KAAK,IAAI;QACxBC,UAAU,CAACR,MAAMO,KAAK;;AAG5B"}

View File

@@ -0,0 +1,3 @@
export declare function DocsLinkButton({ errorMessage }: {
errorMessage: string;
}): import("react/jsx-runtime").JSX.Element;

View File

@@ -0,0 +1,86 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DocsLinkButton", {
enumerable: true,
get: function() {
return DocsLinkButton;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _ishydrationerror = require("../../../../../is-hydration-error");
const _parseurlfromtext = require("../../../utils/parse-url-from-text");
const docsURLAllowlist = [
'https://nextjs.org',
'https://react.dev'
];
function docsLinkMatcher(text) {
return docsURLAllowlist.some((url)=>text.startsWith(url));
}
function getDocsURLFromErrorMessage(text) {
const urls = (0, _parseurlfromtext.parseUrlFromText)(text, docsLinkMatcher);
if (urls.length === 0) {
return null;
}
const href = urls[0];
// Replace react hydration error link with nextjs hydration error link
if (href === _ishydrationerror.REACT_HYDRATION_ERROR_LINK) {
return _ishydrationerror.NEXTJS_HYDRATION_ERROR_LINK;
}
return href;
}
function DocsLinkButton(param) {
let { errorMessage } = param;
const docsURL = getDocsURLFromErrorMessage(errorMessage);
if (!docsURL) {
return /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
title: "No related documentation found",
"aria-label": "No related documentation found",
className: "docs-link-button",
disabled: true,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(DocsIcon, {
className: "error-overlay-toolbar-button-icon",
width: 14,
height: 14
})
});
}
return /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
title: "Go to related documentation",
"aria-label": "Go to related documentation",
className: "docs-link-button",
href: docsURL,
target: "_blank",
rel: "noopener noreferrer",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(DocsIcon, {
className: "error-overlay-toolbar-button-icon",
width: 14,
height: 14
})
});
}
function DocsIcon(props) {
return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
width: "14",
height: "14",
viewBox: "0 0 14 14",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M0 .875h4.375C5.448.875 6.401 1.39 7 2.187A3.276 3.276 0 0 1 9.625.875H14v11.156H9.4c-.522 0-1.023.208-1.392.577l-.544.543h-.928l-.544-.543c-.369-.37-.87-.577-1.392-.577H0V.875zm6.344 3.281a1.969 1.969 0 0 0-1.969-1.968H1.312v8.53H4.6c.622 0 1.225.177 1.744.502V4.156zm1.312 7.064V4.156c0-1.087.882-1.968 1.969-1.968h3.063v8.53H9.4c-.622 0-1.225.177-1.744.502z",
fill: "currentColor"
})
});
}
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=docs-link-button.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-toolbar/docs-link-button.tsx"],"sourcesContent":["import {\n NEXTJS_HYDRATION_ERROR_LINK,\n REACT_HYDRATION_ERROR_LINK,\n} from '../../../../../is-hydration-error'\nimport { parseUrlFromText } from '../../../utils/parse-url-from-text'\n\nconst docsURLAllowlist = ['https://nextjs.org', 'https://react.dev']\n\nfunction docsLinkMatcher(text: string): boolean {\n return docsURLAllowlist.some((url) => text.startsWith(url))\n}\n\nfunction getDocsURLFromErrorMessage(text: string): string | null {\n const urls = parseUrlFromText(text, docsLinkMatcher)\n\n if (urls.length === 0) {\n return null\n }\n\n const href = urls[0]\n\n // Replace react hydration error link with nextjs hydration error link\n if (href === REACT_HYDRATION_ERROR_LINK) {\n return NEXTJS_HYDRATION_ERROR_LINK\n }\n\n return href\n}\n\nexport function DocsLinkButton({ errorMessage }: { errorMessage: string }) {\n const docsURL = getDocsURLFromErrorMessage(errorMessage)\n\n if (!docsURL) {\n return (\n <button\n title=\"No related documentation found\"\n aria-label=\"No related documentation found\"\n className=\"docs-link-button\"\n disabled\n >\n <DocsIcon\n className=\"error-overlay-toolbar-button-icon\"\n width={14}\n height={14}\n />\n </button>\n )\n }\n\n return (\n <a\n title=\"Go to related documentation\"\n aria-label=\"Go to related documentation\"\n className=\"docs-link-button\"\n href={docsURL}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <DocsIcon\n className=\"error-overlay-toolbar-button-icon\"\n width={14}\n height={14}\n />\n </a>\n )\n}\n\nfunction DocsIcon(props: React.SVGProps<SVGSVGElement>) {\n return (\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M0 .875h4.375C5.448.875 6.401 1.39 7 2.187A3.276 3.276 0 0 1 9.625.875H14v11.156H9.4c-.522 0-1.023.208-1.392.577l-.544.543h-.928l-.544-.543c-.369-.37-.87-.577-1.392-.577H0V.875zm6.344 3.281a1.969 1.969 0 0 0-1.969-1.968H1.312v8.53H4.6c.622 0 1.225.177 1.744.502V4.156zm1.312 7.064V4.156c0-1.087.882-1.968 1.969-1.968h3.063v8.53H9.4c-.622 0-1.225.177-1.744.502z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n"],"names":["DocsLinkButton","docsURLAllowlist","docsLinkMatcher","text","some","url","startsWith","getDocsURLFromErrorMessage","urls","parseUrlFromText","length","href","REACT_HYDRATION_ERROR_LINK","NEXTJS_HYDRATION_ERROR_LINK","errorMessage","docsURL","button","title","aria-label","className","disabled","DocsIcon","width","height","a","target","rel","props","svg","viewBox","fill","xmlns","path","fillRule","clipRule","d"],"mappings":";;;;+BA6BgBA;;;eAAAA;;;;kCA1BT;kCAC0B;AAEjC,MAAMC,mBAAmB;IAAC;IAAsB;CAAoB;AAEpE,SAASC,gBAAgBC,IAAY;IACnC,OAAOF,iBAAiBG,IAAI,CAAC,CAACC,MAAQF,KAAKG,UAAU,CAACD;AACxD;AAEA,SAASE,2BAA2BJ,IAAY;IAC9C,MAAMK,OAAOC,IAAAA,kCAAgB,EAACN,MAAMD;IAEpC,IAAIM,KAAKE,MAAM,KAAK,GAAG;QACrB,OAAO;IACT;IAEA,MAAMC,OAAOH,IAAI,CAAC,EAAE;IAEpB,sEAAsE;IACtE,IAAIG,SAASC,4CAA0B,EAAE;QACvC,OAAOC,6CAA2B;IACpC;IAEA,OAAOF;AACT;AAEO,SAASX,eAAe,KAA0C;IAA1C,IAAA,EAAEc,YAAY,EAA4B,GAA1C;IAC7B,MAAMC,UAAUR,2BAA2BO;IAE3C,IAAI,CAACC,SAAS;QACZ,qBACE,qBAACC;YACCC,OAAM;YACNC,cAAW;YACXC,WAAU;YACVC,QAAQ;sBAER,cAAA,qBAACC;gBACCF,WAAU;gBACVG,OAAO;gBACPC,QAAQ;;;IAIhB;IAEA,qBACE,qBAACC;QACCP,OAAM;QACNC,cAAW;QACXC,WAAU;QACVR,MAAMI;QACNU,QAAO;QACPC,KAAI;kBAEJ,cAAA,qBAACL;YACCF,WAAU;YACVG,OAAO;YACPC,QAAQ;;;AAIhB;AAEA,SAASF,SAASM,KAAoC;IACpD,qBACE,qBAACC;QACCN,OAAM;QACNC,QAAO;QACPM,SAAQ;QACRC,MAAK;QACLC,OAAM;QACL,GAAGJ,KAAK;kBAET,cAAA,qBAACK;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFL,MAAK;;;AAIb"}

View File

@@ -0,0 +1,8 @@
import type { DebugInfo } from '../../../../types';
type ErrorOverlayToolbarProps = {
error: Error;
debugInfo: DebugInfo | undefined;
};
export declare function ErrorOverlayToolbar({ error, debugInfo, }: ErrorOverlayToolbarProps): import("react/jsx-runtime").JSX.Element;
export declare const styles = "\n .error-overlay-toolbar {\n display: flex;\n gap: 6px;\n }\n\n .nodejs-inspector-button,\n .copy-stack-trace-button,\n .docs-link-button {\n display: flex;\n justify-content: center;\n align-items: center;\n\n width: var(--size-28);\n height: var(--size-28);\n background: var(--color-background-100);\n background-clip: padding-box;\n border: 1px solid var(--color-gray-alpha-400);\n box-shadow: var(--shadow-small);\n border-radius: var(--rounded-full);\n\n svg {\n width: var(--size-14);\n height: var(--size-14);\n }\n\n &:focus {\n outline: var(--focus-ring);\n }\n\n &:not(:disabled):hover {\n background: var(--color-gray-alpha-100);\n }\n\n &:not(:disabled):active {\n background: var(--color-gray-alpha-200);\n }\n\n &:disabled {\n background-color: var(--color-gray-100);\n cursor: not-allowed;\n }\n }\n\n .error-overlay-toolbar-button-icon {\n color: var(--color-gray-900);\n }\n";
export {};

View File

@@ -0,0 +1,52 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
ErrorOverlayToolbar: null,
styles: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ErrorOverlayToolbar: function() {
return ErrorOverlayToolbar;
},
styles: function() {
return styles;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _nodejsinspectorbutton = require("./nodejs-inspector-button");
const _copystacktracebutton = require("./copy-stack-trace-button");
const _docslinkbutton = require("./docs-link-button");
function ErrorOverlayToolbar(param) {
let { error, debugInfo } = param;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
className: "error-overlay-toolbar",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_copystacktracebutton.CopyStackTraceButton, {
error: error
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_docslinkbutton.DocsLinkButton, {
errorMessage: error.message
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_nodejsinspectorbutton.NodejsInspectorButton, {
devtoolsFrontendUrl: debugInfo == null ? void 0 : debugInfo.devtoolsFrontendUrl
})
]
});
}
const styles = "\n .error-overlay-toolbar {\n display: flex;\n gap: 6px;\n }\n\n .nodejs-inspector-button,\n .copy-stack-trace-button,\n .docs-link-button {\n display: flex;\n justify-content: center;\n align-items: center;\n\n width: var(--size-28);\n height: var(--size-28);\n background: var(--color-background-100);\n background-clip: padding-box;\n border: 1px solid var(--color-gray-alpha-400);\n box-shadow: var(--shadow-small);\n border-radius: var(--rounded-full);\n\n svg {\n width: var(--size-14);\n height: var(--size-14);\n }\n\n &:focus {\n outline: var(--focus-ring);\n }\n\n &:not(:disabled):hover {\n background: var(--color-gray-alpha-100);\n }\n\n &:not(:disabled):active {\n background: var(--color-gray-alpha-200);\n }\n\n &:disabled {\n background-color: var(--color-gray-100);\n cursor: not-allowed;\n }\n }\n\n .error-overlay-toolbar-button-icon {\n color: var(--color-gray-900);\n }\n";
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=error-overlay-toolbar.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx"],"sourcesContent":["import type { DebugInfo } from '../../../../types'\nimport { NodejsInspectorButton } from './nodejs-inspector-button'\nimport { CopyStackTraceButton } from './copy-stack-trace-button'\nimport { DocsLinkButton } from './docs-link-button'\n\ntype ErrorOverlayToolbarProps = {\n error: Error\n debugInfo: DebugInfo | undefined\n}\n\nexport function ErrorOverlayToolbar({\n error,\n debugInfo,\n}: ErrorOverlayToolbarProps) {\n return (\n <span className=\"error-overlay-toolbar\">\n <CopyStackTraceButton error={error} />\n <DocsLinkButton errorMessage={error.message} />\n <NodejsInspectorButton\n devtoolsFrontendUrl={debugInfo?.devtoolsFrontendUrl}\n />\n </span>\n )\n}\n\nexport const styles = `\n .error-overlay-toolbar {\n display: flex;\n gap: 6px;\n }\n\n .nodejs-inspector-button,\n .copy-stack-trace-button,\n .docs-link-button {\n display: flex;\n justify-content: center;\n align-items: center;\n\n width: var(--size-28);\n height: var(--size-28);\n background: var(--color-background-100);\n background-clip: padding-box;\n border: 1px solid var(--color-gray-alpha-400);\n box-shadow: var(--shadow-small);\n border-radius: var(--rounded-full);\n\n svg {\n width: var(--size-14);\n height: var(--size-14);\n }\n\n &:focus {\n outline: var(--focus-ring);\n }\n\n &:not(:disabled):hover {\n background: var(--color-gray-alpha-100);\n }\n\n &:not(:disabled):active {\n background: var(--color-gray-alpha-200);\n }\n\n &:disabled {\n background-color: var(--color-gray-100);\n cursor: not-allowed;\n }\n }\n\n .error-overlay-toolbar-button-icon {\n color: var(--color-gray-900);\n }\n`\n"],"names":["ErrorOverlayToolbar","styles","error","debugInfo","span","className","CopyStackTraceButton","DocsLinkButton","errorMessage","message","NodejsInspectorButton","devtoolsFrontendUrl"],"mappings":";;;;;;;;;;;;;;;IAUgBA,mBAAmB;eAAnBA;;IAeHC,MAAM;eAANA;;;;uCAxByB;sCACD;gCACN;AAOxB,SAASD,oBAAoB,KAGT;IAHS,IAAA,EAClCE,KAAK,EACLC,SAAS,EACgB,GAHS;IAIlC,qBACE,sBAACC;QAAKC,WAAU;;0BACd,qBAACC,0CAAoB;gBAACJ,OAAOA;;0BAC7B,qBAACK,8BAAc;gBAACC,cAAcN,MAAMO,OAAO;;0BAC3C,qBAACC,4CAAqB;gBACpBC,mBAAmB,EAAER,6BAAAA,UAAWQ,mBAAmB;;;;AAI3D;AAEO,MAAMV,SAAU"}

View File

@@ -0,0 +1,3 @@
export declare function NodejsInspectorButton({ devtoolsFrontendUrl, }: {
devtoolsFrontendUrl: string | undefined;
}): import("react/jsx-runtime").JSX.Element;

Some files were not shown because too many files have changed in this diff Show More