npm - next - Versions diffs - 15.2.0-canary.65 → 15.2.0-canary.66 - Mend

next 15.2.0-canary.65 → 15.2.0-canary.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of next might be problematic. Click here for more details.

Files changed (334) hide show

package/dist/client/components/react-dev-overlay/_experimental/internal/components/code-frame/code-frame.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/code-frame/code-frame.tsx"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\n\nimport Anser from 'next/dist/compiled/anser'\nimport stripAnsi from 'next/dist/compiled/strip-ansi'\n\nimport { useMemo } from 'react'\nimport { HotlinkedText } from '../hot-linked-text'\nimport { getFrameSource } from '../../../../internal/helpers/stack-frame'\nimport { useOpenInEditor } from '../../helpers/use-open-in-editor'\nimport { noop as css } from '../../helpers/noop-template'\nimport { ExternalIcon } from '../../icons/external'\nimport { FileIcon } from '../../icons/file'\n\nexport type CodeFrameProps = { stackFrame: StackFrame; codeFrame: string }\n\nexport function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {\n // Strip leading spaces out of the code frame:\n const formattedFrame = useMemo<string>(() => {\n const lines = codeFrame.split(/\\r?\\n/g)\n\n // Find the minimum length of leading spaces after `\|` in the code frame\n const miniLeadingSpacesLength = lines\n .map((line) =>\n /^>? +\\d+ +\\\| [ ]+/.exec(stripAnsi(line)) === null\n ? null\n : /^>? +\\d+ +\\\| ( )/.exec(stripAnsi(line))\n )\n .filter(Boolean)\n .map((v) => v!.pop()!)\n .reduce((c, n) => (isNaN(c) ? n.length : Math.min(c, n.length)), NaN)\n\n // When the minimum length of leading spaces is greater than 1, remove them\n // from the code frame to help the indentation looks better when there's a lot leading spaces.\n if (miniLeadingSpacesLength > 1) {\n return lines\n .map((line, a) =>\n ~(a = line.indexOf('\|'))\n ? line.substring(0, a) +\n line.substring(a).replace(`^\\\\ {${miniLeadingSpacesLength}}`, '')\n : line\n )\n .join('\\n')\n }\n return lines.join('\\n')\n }, [codeFrame])\n\n const decoded = useMemo(() => {\n return Anser.ansiToJson(formattedFrame, {\n json: true,\n use_classes: true,\n remove_empty: true,\n })\n }, [formattedFrame])\n\n const open = useOpenInEditor({\n file: stackFrame.file,\n lineNumber: stackFrame.lineNumber,\n column: stackFrame.column,\n })\n\n const fileExtension = stackFrame?.file?.split('.').pop()\n\n // TODO: make the caret absolute\n return (\n <div data-nextjs-codeframe>\n <button\n aria-label=\"Open error location in editor\"\n className=\"code-frame-header\"\n onClick={open}\n >\n <p className=\"code-frame-link\">\n <span className=\"code-frame-icon\">\n <FileIcon lang={fileExtension} />\n {getFrameSource(stackFrame)} @{' '}\n <HotlinkedText text={stackFrame.methodName} />\n </span>\n <ExternalIcon width={16} height={16} />\n </p>\n </button>\n <pre className=\"code-frame-pre\">\n {decoded.map((entry, index) => (\n <span\n key={`frame-${index}`}\n style={{\n color: entry.fg ? `var(--color-${entry.fg})` : undefined,\n ...(entry.decoration === 'bold'\n ? // TODO(jiwon): This used to be 800, but the symbols like `─┬─` are\n // having longer width than expected on Geist Mono font-weight\n // above 600, hence a temporary fix is to use 500 for bold.\n { fontWeight: 500 }\n : entry.decoration === 'italic'\n ? { fontStyle: 'italic' }\n : undefined),\n }}\n >\n {entry.content}\n </span>\n ))}\n </pre>\n </div>\n )\n}\n\nexport const CODE_FRAME_STYLES = css`\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: 12px;\n line-height: 16px;\n margin: var(--size-2) 0;\n }\n\n .code-frame-link,\n .code-frame-pre {\n padding: 12px;\n }\n\n .code-frame-pre {\n white-space: pre-wrap;\n }\n\n .code-frame-header {\n width: 100%;\n cursor: pointer;\n transition: background 100ms ease-out;\n border-radius: 8px 8px 0 0;\n border-bottom: 1px solid var(--color-gray-400);\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 ~~.code-frame-icon {\n display: flex;\n align-items: center;\n gap: 6px;\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] * {\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 ~~align-items~~: ~~center~~;\n ~~justify-content~~: ~~space-between~~;\n ~~margin:~~ ~~0;\~~n ~~outline~~: 0;\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`\n"],"names":["CODE_FRAME_STYLES","CodeFrame","stackFrame","codeFrame","formattedFrame","useMemo","lines","split","miniLeadingSpacesLength","map","line","exec","stripAnsi","filter","Boolean","v","pop","reduce","c","n","isNaN","length","Math","min","NaN","a","indexOf","substring","replace","join","decoded","Anser","ansiToJson","json","use_classes","remove_empty","open","useOpenInEditor","file","lineNumber","column","fileExtension","div","data-nextjs-codeframe","button","aria-label","className","onClick","p","span","FileIcon","lang","getFrameSource","HotlinkedText","text","methodName","ExternalIcon","width","height","pre","entry","index","style","color","fg","undefined","decoration","fontWeight","fontStyle","content","css"],"mappings":";;;;;;;;;;;;;;;~~IAuGaA~~,iBAAiB;eAAjBA;;~~IAxFGC~~,SAAS;eAATA;;;;;;gEAbE;oEACI;uBAEE;+BACM;4BACC;iCACC;8BACJ;0BACC;sBACJ;;;;;;;;;;AAIlB,SAASA,UAAU,KAAyC;IAAzC,IAAA,EAAEC,UAAU,EAAEC,SAAS,EAAkB,GAAzC;QA6CFD;IA5CtB,8CAA8C;IAC9C,MAAME,iBAAiBC,IAAAA,cAAO,EAAS;QACrC,MAAMC,QAAQH,UAAUI,KAAK,CAAC;QAE9B,wEAAwE;QACxE,MAAMC,0BAA0BF,MAC7BG,GAAG,CAAC,CAACC,OACJ,oBAAoBC,IAAI,CAACC,IAAAA,kBAAS,EAACF,WAAW,OAC1C,OACA,oBAAoBC,IAAI,CAACC,IAAAA,kBAAS,EAACF,QAExCG,MAAM,CAACC,SACPL,GAAG,CAAC,CAACM,IAAMA,EAAGC,GAAG,IACjBC,MAAM,CAAC,CAACC,GAAGC,IAAOC,MAAMF,KAAKC,EAAEE,MAAM,GAAGC,KAAKC,GAAG,CAACL,GAAGC,EAAEE,MAAM,GAAIG;QAEnE,2EAA2E;QAC3E,8FAA8F;QAC9F,IAAIhB,0BAA0B,GAAG;YAC/B,OAAOF,MACJG,GAAG,CAAC,CAACC,MAAMe,IACV,CAAEA,CAAAA,IAAIf,KAAKgB,OAAO,CAAC,IAAG,IAClBhB,KAAKiB,SAAS,CAAC,GAAGF,KAClBf,KAAKiB,SAAS,CAACF,GAAGG,OAAO,CAAC,AAAC,UAAOpB,0BAAwB,KAAI,MAC9DE,MAELmB,IAAI,CAAC;QACV;QACA,OAAOvB,MAAMuB,IAAI,CAAC;IACpB,GAAG;QAAC1B;KAAU;IAEd,MAAM2B,UAAUzB,IAAAA,cAAO,EAAC;QACtB,OAAO0B,cAAK,CAACC,UAAU,CAAC5B,gBAAgB;YACtC6B,MAAM;YACNC,aAAa;YACbC,cAAc;QAChB;IACF,GAAG;QAAC/B;KAAe;IAEnB,MAAMgC,OAAOC,IAAAA,gCAAe,EAAC;QAC3BC,MAAMpC,WAAWoC,IAAI;QACrBC,YAAYrC,WAAWqC,UAAU;QACjCC,QAAQtC,WAAWsC,MAAM;IAC3B;IAEA,MAAMC,gBAAgBvC,+BAAAA,mBAAAA,WAAYoC,IAAI,qBAAhBpC,iBAAkBK,KAAK,CAAC,KAAKS,GAAG;IAEtD,gCAAgC;IAChC,qBACE,sBAAC0B;QAAIC,uBAAqB;;0BACxB,qBAACC;gBACCC,cAAW;gBACXC,WAAU;gBACVC,SAASX;0BAET,cAAA,sBAACY;oBAAEF,WAAU;;sCACX,~~sBAACG~~;4BAAKH,WAAU~~;;8CACd~~,~~qBAACI~~,cAAQ;~~oCAACC~~,~~MAAMV~~;;~~gCACfW~~,IAAAA,0BAAc,~~EAAClD~~;gCAAY;gCAAG;8CAC/B,~~qBAACmD~~,4BAAa;oCAACC,~~MAAMpD~~,~~WAAWqD~~,UAAU;;;;sCAE5C,~~qBAACC~~,sBAAY;~~4BAACC~~,OAAO;~~4BAAIC~~,QAAQ~~;;;;;0BAGrC~~,qBAACC;~~gBAAIb~~,WAAU;0BACZhB,QAAQrB,GAAG,CAAC,~~CAACmD~~,OAAOC,sBACnB,~~qBAACZ~~;~~wBAECa~~,OAAO;4BACLC,OAAOH,MAAMI,EAAE,GAAG,AAAC,iBAAcJ,MAAMI,EAAE,GAAC,MAAKC;4BAC/C,GAAIL,MAAMM,UAAU,KAAK,SAErB,8DAA8D;4BAC9D,2DAA2D;4BAC3D;gCAAEC,YAAY;4BAAI,IAClBP,MAAMM,UAAU,KAAK,WACnB;gCAAEE,WAAW;4BAAS,IACtBH,SAAS;wBACjB;kCAECL,MAAMS,OAAO;uBAbT,AAAC,WAAQR;;;;AAmB1B;AAEO,~~MAAM7D~~,~~wBAAoBsE~~,kBAAG"}
1	+ {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/code-frame/code-frame.tsx"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\n\nimport Anser from 'next/dist/compiled/anser'\nimport stripAnsi from 'next/dist/compiled/strip-ansi'\n\nimport { useMemo } from 'react'\nimport { HotlinkedText } from '../hot-linked-text'\nimport { getFrameSource } from '../../../../internal/helpers/stack-frame'\nimport { useOpenInEditor } from '../../helpers/use-open-in-editor'\nimport { noop as css } from '../../helpers/noop-template'\nimport { ExternalIcon } from '../../icons/external'\nimport { FileIcon } from '../../icons/file'\n\nexport type CodeFrameProps = { stackFrame: StackFrame; codeFrame: string }\n\nexport function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {\n // Strip leading spaces out of the code frame:\n const formattedFrame = useMemo<string>(() => {\n const lines = codeFrame.split(/\\r?\\n/g)\n\n // Find the minimum length of leading spaces after `\|` in the code frame\n const miniLeadingSpacesLength = lines\n .map((line) =>\n /^>? +\\d+ +\\\| [ ]+/.exec(stripAnsi(line)) === null\n ? null\n : /^>? +\\d+ +\\\| ( )/.exec(stripAnsi(line))\n )\n .filter(Boolean)\n .map((v) => v!.pop()!)\n .reduce((c, n) => (isNaN(c) ? n.length : Math.min(c, n.length)), NaN)\n\n // When the minimum length of leading spaces is greater than 1, remove them\n // from the code frame to help the indentation looks better when there's a lot leading spaces.\n if (miniLeadingSpacesLength > 1) {\n return lines\n .map((line, a) =>\n ~(a = line.indexOf('\|'))\n ? line.substring(0, a) +\n line.substring(a).replace(`^\\\\ {${miniLeadingSpacesLength}}`, '')\n : line\n )\n .join('\\n')\n }\n return lines.join('\\n')\n }, [codeFrame])\n\n const decoded = useMemo(() => {\n return Anser.ansiToJson(formattedFrame, {\n json: true,\n use_classes: true,\n remove_empty: true,\n })\n }, [formattedFrame])\n\n const open = useOpenInEditor({\n file: stackFrame.file,\n lineNumber: stackFrame.lineNumber,\n column: stackFrame.column,\n })\n\n const fileExtension = stackFrame?.file?.split('.').pop()\n\n // TODO: make the caret absolute\n return (\n <div data-nextjs-codeframe>\n <button\n aria-label=\"Open error location in editor\"\n className=\"code-frame-header\"\n onClick={open}\n >\n <p className=\"code-frame-link\">\n <span className=\"code-frame-icon\" data-icon=\"left\">\n <FileIcon lang={fileExtension} />\n </span>\n <span data-text>\n {getFrameSource(stackFrame)} @{' '}\n <HotlinkedText text={stackFrame.methodName} />\n </span>\n <span className=\"code-frame-icon\" data-icon=\"right\">\n <ExternalIcon width={16} height={16} />\n </span>\n </p>\n </button>\n <pre className=\"code-frame-pre\">\n {decoded.map((entry, index) => (\n <span\n key={`frame-${index}`}\n style={{\n color: entry.fg ? `var(--color-${entry.fg})` : undefined,\n ...(entry.decoration === 'bold'\n ? // TODO(jiwon): This used to be 800, but the symbols like `─┬─` are\n // having longer width than expected on Geist Mono font-weight\n // above 600, hence a temporary fix is to use 500 for bold.\n { fontWeight: 500 }\n : entry.decoration === 'italic'\n ? { fontStyle: 'italic' }\n : undefined),\n }}\n >\n {entry.content}\n </span>\n ))}\n </pre>\n </div>\n )\n}\n\nexport const CODE_FRAME_STYLES = css`\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: 12px;\n line-height: 16px;\n margin: var(--size-2) 0;\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 cursor: pointer;\n transition: background 100ms ease-out;\n border-radius: 8px 8px 0 0;\n border-bottom: 1px solid var(--color-gray-400);\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] * {\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`\n"],"names":["CODE_FRAME_STYLES","CodeFrame","stackFrame","codeFrame","formattedFrame","useMemo","lines","split","miniLeadingSpacesLength","map","line","exec","stripAnsi","filter","Boolean","v","pop","reduce","c","n","isNaN","length","Math","min","NaN","a","indexOf","substring","replace","join","decoded","Anser","ansiToJson","json","use_classes","remove_empty","open","useOpenInEditor","file","lineNumber","column","fileExtension","div","data-nextjs-codeframe","button","aria-label","className","onClick","p","span","data-icon","FileIcon","lang","data-text","getFrameSource","HotlinkedText","text","methodName","ExternalIcon","width","height","pre","entry","index","style","color","fg","undefined","decoration","fontWeight","fontStyle","content","css"],"mappings":"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"}

package/dist/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.js CHANGED Viewed

@@ -28,7 +28,7 @@ const _nooptemplate = require("../../helpers/noop-template");
 const _cx = require("../../helpers/cx");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
-        "\n  [data-nextjs-data-runtime-error-copy-button],\n  [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {\n    position: relative;\n    padding: 0;\n    border: none;\n    background: none;\n    outline: none;\n  }\n  [data-nextjs-data-runtime-error-copy-button] > svg {\n    vertical-align: middle;\n  }\n  .nextjs-data-runtime-error-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-runtime-error-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-runtime-error-copy-button--error,\n  .nextjs-data-runtime-error-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-runtime-error-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n"
+        "\n  .nextjs-data-copy-button {\n    color: inherit;\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"
     ]);
     _templateObject = function() {
         return data;
@@ -200,8 +200,8 @@ function CopyButton(param) {
         "aria-label": label,
         "aria-disabled": isDisabled,
         disabled: isDisabled,
-        "data-nextjs-data-runtime-error-copy-button": true,
-        className: (0, _cx.cx)(props.className, 'nextjs-data-runtime-error-copy-button', "nextjs-data-runtime-error-copy-button--" + copyState.state),
+        "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();

package/dist/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { noop as css } from '../../helpers/noop-template'\nimport { cx } from '../../helpers/cx'\n\nfunction useCopyLegacy(content: string) {\n type CopyState =\n \| {\n state: 'initial'\n }\n \| {\n state: 'error'\n error: unknown\n }\n \| { state: 'success' }\n \| { state: 'pending' }\n\n // This would be simpler with useActionState but we need to support React 18 here.\n // React 18 also doesn't have async transitions.\n const [copyState, dispatch] = React.useReducer(\n (\n state: CopyState,\n action:\n \| { type: 'reset' \| 'copied' \| 'copying' }\n \| { type: 'error'; error: unknown }\n ): CopyState => {\n if (action.type === 'reset') {\n return { state: 'initial' }\n }\n if (action.type === 'copied') {\n return { state: 'success' }\n }\n if (action.type === 'copying') {\n return { state: 'pending' }\n }\n if (action.type === 'error') {\n return { state: 'error', error: action.error }\n }\n return state\n },\n {\n state: 'initial',\n }\n )\n function copy() {\n if (isPending) {\n return\n }\n\n if (!navigator.clipboard) {\n dispatch({\n type: 'error',\n error: new Error('Copy to clipboard is not supported in this browser'),\n })\n } else {\n dispatch({ type: 'copying' })\n navigator.clipboard.writeText(content).then(\n () => {\n dispatch({ type: 'copied' })\n },\n (error) => {\n dispatch({ type: 'error', error })\n }\n )\n }\n }\n const reset = React.useCallback(() => {\n dispatch({ type: 'reset' })\n }, [])\n\n const isPending = copyState.state === 'pending'\n\n return [copyState, copy, reset, isPending] as const\n}\n\nfunction useCopyModern(content: string) {\n type CopyState =\n \| {\n state: 'initial'\n }\n \| {\n state: 'error'\n error: unknown\n }\n \| { state: 'success' }\n\n const [copyState, dispatch, isPending] = React.useActionState(\n (\n state: CopyState,\n action: 'reset' \| 'copy'\n ): CopyState \| Promise<CopyState> => {\n if (action === 'reset') {\n return { state: 'initial' }\n }\n if (action === 'copy') {\n if (!navigator.clipboard) {\n return {\n state: 'error',\n error: new Error(\n 'Copy to clipboard is not supported in this browser'\n ),\n }\n }\n return navigator.clipboard.writeText(content).then(\n () => {\n return { state: 'success' }\n },\n (error) => {\n return { state: 'error', error }\n }\n )\n }\n return state\n },\n {\n state: 'initial',\n }\n )\n\n function copy() {\n React.startTransition(() => {\n dispatch('copy')\n })\n }\n\n const reset = React.useCallback(() => {\n dispatch('reset')\n }, [\n // TODO: `dispatch` from `useActionState` is not reactive.\n // Remove from dependencies once https://github.com/facebook/react/pull/29665 is released.\n dispatch,\n ])\n\n return [copyState, copy, reset, isPending] as const\n}\n\nconst useCopy =\n typeof React.useActionState === 'function' ? useCopyModern : useCopyLegacy\n\nexport function CopyButton({\n actionLabel,\n successLabel,\n content,\n icon,\n disabled,\n ...props\n}: React.HTMLProps<HTMLButtonElement> & {\n actionLabel: string\n successLabel: string\n content: string\n icon?: React.ReactNode\n}) {\n const [copyState, copy, reset, isPending] = useCopy(content)\n\n const error = copyState.state === 'error' ? copyState.error : null\n React.useEffect(() => {\n if (error !== null) {\n // Additional console.error to get the stack.\n console.error(error)\n }\n }, [error])\n React.useEffect(() => {\n if (copyState.state === 'success') {\n const timeoutId = setTimeout(() => {\n reset()\n }, 2000)\n\n return () => {\n clearTimeout(timeoutId)\n }\n }\n }, [isPending, copyState.state, reset])\n const isDisabled = isPending \|\| disabled\n const label = copyState.state === 'success' ? successLabel : actionLabel\n\n // Assign default icon\n const renderedIcon =\n copyState.state === 'success' ? (\n <CopySuccessIcon />\n ) : (\n icon \|\| (\n <CopyIcon\n width={14}\n height={14}\n className=\"error-overlay-toolbar-button-icon\"\n />\n )\n )\n\n return (\n <button\n {...props}\n type=\"button\"\n title={label}\n aria-label={label}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n data-nextjs-data-runtime-error-copy-button\n className={cx(\n props.className,\n 'nextjs-data-runtime-error-copy-button',\n `nextjs-data-runtime-error-copy-button--${copyState.state}`\n )}\n onClick={() => {\n if (!isDisabled) {\n copy()\n }\n }}\n >\n {renderedIcon}\n {copyState.state === 'error' ? ` ${copyState.error}` : null}\n </button>\n )\n}\n\nfunction CopyIcon(props: React.SVGProps<SVGSVGElement>) {\n return (\n <svg\n width=\"14\"\n height=\"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=\"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\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nfunction CopySuccessIcon() {\n return (\n <svg\n height=\"16\"\n xlinkTitle=\"copied\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n stroke=\"currentColor\"\n fill=\"currentColor\"\n >\n <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\" />\n </svg>\n )\n}\n\nexport const COPY_BUTTON_STYLES = css`\n [data-nextjs-data-runtime-error-copy-button],\n [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {\n position: relative;\n padding: 0;\n border: none;\n background: none;\n outline: none;\n }\n [data-nextjs-data-runtime-error-copy-button] > svg {\n vertical-align: middle;\n }\n .nextjs-data-runtime-error-copy-button {\n color: inherit;\n }\n .nextjs-data-runtime-error-copy-button--initial:hover {\n cursor: pointer;\n }\n .nextjs-data-runtime-error-copy-button--error,\n .nextjs-data-runtime-error-copy-button--error:hover {\n color: var(--color-ansi-red);\n }\n .nextjs-data-runtime-error-copy-button--success {\n color: var(--color-ansi-green);\n }\n`\n"],"names":["COPY_BUTTON_STYLES","CopyButton","useCopyLegacy","content","copyState","dispatch","React","useReducer","state","action","type","error","copy","isPending","navigator","clipboard","Error","writeText","then","reset","useCallback","useCopyModern","useActionState","startTransition","useCopy","actionLabel","successLabel","icon","disabled","props","useEffect","console","timeoutId","setTimeout","clearTimeout","isDisabled","label","renderedIcon","CopySuccessIcon","CopyIcon","width","height","className","button","title","aria-label","aria-disabled","data-nextjs-data-runtime-error-copy-button","cx","onClick","svg","fill","xmlns","path","fillRule","clipRule","d","xlinkTitle","viewBox","stroke","css"],"mappings":";;;;;;;;;;;;;;;IAwPaA,kBAAkB;eAAlBA;;IA9GGC,UAAU;eAAVA;;;;;;iEA1IO;8BACK;oBACT;;;;;;;;;;AAEnB,SAASC,cAAcC,OAAe;IAYpC,kFAAkF;IAClF,gDAAgD;IAChD,MAAM,CAACC,WAAWC,SAAS,GAAGC,OAAMC,UAAU,CAC5C,CACEC,OACAC;QAIA,IAAIA,OAAOC,IAAI,KAAK,SAAS;YAC3B,OAAO;gBAAEF,OAAO;YAAU;QAC5B;QACA,IAAIC,OAAOC,IAAI,KAAK,UAAU;YAC5B,OAAO;gBAAEF,OAAO;YAAU;QAC5B;QACA,IAAIC,OAAOC,IAAI,KAAK,WAAW;YAC7B,OAAO;gBAAEF,OAAO;YAAU;QAC5B;QACA,IAAIC,OAAOC,IAAI,KAAK,SAAS;YAC3B,OAAO;gBAAEF,OAAO;gBAASG,OAAOF,OAAOE,KAAK;YAAC;QAC/C;QACA,OAAOH;IACT,GACA;QACEA,OAAO;IACT;IAEF,SAASI;QACP,IAAIC,WAAW;YACb;QACF;QAEA,IAAI,CAACC,UAAUC,SAAS,EAAE;YACxBV,SAAS;gBACPK,MAAM;gBACNC,OAAO,qBAA+D,CAA/D,IAAIK,MAAM,uDAAV,qBAAA;2BAAA;gCAAA;kCAAA;gBAA8D;YACvE;QACF,OAAO;YACLX,SAAS;gBAAEK,MAAM;YAAU;YAC3BI,UAAUC,SAAS,CAACE,SAAS,CAACd,SAASe,IAAI,CACzC;gBACEb,SAAS;oBAAEK,MAAM;gBAAS;YAC5B,GACA,CAACC;gBACCN,SAAS;oBAAEK,MAAM;oBAASC;gBAAM;YAClC;QAEJ;IACF;IACA,MAAMQ,QAAQb,OAAMc,WAAW,CAAC;QAC9Bf,SAAS;YAAEK,MAAM;QAAQ;IAC3B,GAAG,EAAE;IAEL,MAAMG,YAAYT,UAAUI,KAAK,KAAK;IAEtC,OAAO;QAACJ;QAAWQ;QAAMO;QAAON;KAAU;AAC5C;AAEA,SAASQ,cAAclB,OAAe;IAWpC,MAAM,CAACC,WAAWC,UAAUQ,UAAU,GAAGP,OAAMgB,cAAc,CAC3D,CACEd,OACAC;QAEA,IAAIA,WAAW,SAAS;YACtB,OAAO;gBAAED,OAAO;YAAU;QAC5B;QACA,IAAIC,WAAW,QAAQ;YACrB,IAAI,CAACK,UAAUC,SAAS,EAAE;gBACxB,OAAO;oBACLP,OAAO;oBACPG,OAAO,qBAEN,CAFM,IAAIK,MACT,uDADK,qBAAA;+BAAA;oCAAA;sCAAA;oBAEP;gBACF;YACF;YACA,OAAOF,UAAUC,SAAS,CAACE,SAAS,CAACd,SAASe,IAAI,CAChD;gBACE,OAAO;oBAAEV,OAAO;gBAAU;YAC5B,GACA,CAACG;gBACC,OAAO;oBAAEH,OAAO;oBAASG;gBAAM;YACjC;QAEJ;QACA,OAAOH;IACT,GACA;QACEA,OAAO;IACT;IAGF,SAASI;QACPN,OAAMiB,eAAe,CAAC;YACpBlB,SAAS;QACX;IACF;IAEA,MAAMc,QAAQb,OAAMc,WAAW,CAAC;QAC9Bf,SAAS;IACX,GAAG;QACD,0DAA0D;QAC1D,0FAA0F;QAC1FA;KACD;IAED,OAAO;QAACD;QAAWQ;QAAMO;QAAON;KAAU;AAC5C;AAEA,MAAMW,UACJ,OAAOlB,OAAMgB,cAAc,KAAK,aAAaD,gBAAgBnB;AAExD,SAASD,WAAW,KAY1B;IAZ0B,IAAA,EACzBwB,WAAW,EACXC,YAAY,EACZvB,OAAO,EACPwB,IAAI,EACJC,QAAQ,EACR,GAAGC,OAMJ,GAZ0B;IAazB,MAAM,CAACzB,WAAWQ,MAAMO,OAAON,UAAU,GAAGW,QAAQrB;IAEpD,MAAMQ,QAAQP,UAAUI,KAAK,KAAK,UAAUJ,UAAUO,KAAK,GAAG;IAC9DL,OAAMwB,SAAS,CAAC;QACd,IAAInB,UAAU,MAAM;YAClB,6CAA6C;YAC7CoB,QAAQpB,KAAK,CAACA;QAChB;IACF,GAAG;QAACA;KAAM;IACVL,OAAMwB,SAAS,CAAC;QACd,IAAI1B,UAAUI,KAAK,KAAK,WAAW;YACjC,MAAMwB,YAAYC,WAAW;gBAC3Bd;YACF,GAAG;YAEH,OAAO;gBACLe,aAAaF;YACf;QACF;IACF,GAAG;QAACnB;QAAWT,UAAUI,KAAK;QAAEW;KAAM;IACtC,MAAMgB,aAAatB,aAAae;IAChC,MAAMQ,QAAQhC,UAAUI,KAAK,KAAK,YAAYkB,eAAeD;IAE7D,sBAAsB;IACtB,MAAMY,eACJjC,UAAUI,KAAK,KAAK,0BAClB,qBAAC8B,uBAEDX,sBACE,qBAACY;QACCC,OAAO;QACPC,QAAQ;QACRC,WAAU;;IAKlB,qBACE,sBAACC;QACE,GAAGd,KAAK;QACTnB,MAAK;QACLkC,OAAOR;QACPS,cAAYT;QACZU,iBAAeX;QACfP,UAAUO;QACVY,4CAA0C;QAC1CL,WAAWM,IAAAA,MAAE,EACXnB,MAAMa,SAAS,EACf,yCACA,AAAC,4CAAyCtC,UAAUI,KAAK;QAE3DyC,SAAS;YACP,IAAI,CAACd,YAAY;gBACfvB;YACF;QACF;;YAECyB;YACAjC,UAAUI,KAAK,KAAK,UAAU,AAAC,MAAGJ,UAAUO,KAAK,GAAK;;;AAG7D;AAEA,SAAS4B,SAASV,KAAoC;IACpD,qBACE,qBAACqB;QACCV,OAAM;QACNC,QAAO;QACPU,MAAK;QACLC,OAAM;QACL,GAAGvB,KAAK;kBAET,cAAA,qBAACwB;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFL,MAAK;;;AAIb;AAEA,SAASb;IACP,qBACE,qBAACY;QACCT,QAAO;QACPgB,YAAW;QACXC,SAAQ;QACRlB,OAAM;QACNmB,QAAO;QACPR,MAAK;kBAEL,cAAA,qBAACE;YAAKG,GAAE;;;AAGd;AAEO,MAAMxD,yBAAqB4D,kBAAG"}
1	+ {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { noop as css } from '../../helpers/noop-template'\nimport { cx } from '../../helpers/cx'\n\nfunction useCopyLegacy(content: string) {\n type CopyState =\n \| {\n state: 'initial'\n }\n \| {\n state: 'error'\n error: unknown\n }\n \| { state: 'success' }\n \| { state: 'pending' }\n\n // This would be simpler with useActionState but we need to support React 18 here.\n // React 18 also doesn't have async transitions.\n const [copyState, dispatch] = React.useReducer(\n (\n state: CopyState,\n action:\n \| { type: 'reset' \| 'copied' \| 'copying' }\n \| { type: 'error'; error: unknown }\n ): CopyState => {\n if (action.type === 'reset') {\n return { state: 'initial' }\n }\n if (action.type === 'copied') {\n return { state: 'success' }\n }\n if (action.type === 'copying') {\n return { state: 'pending' }\n }\n if (action.type === 'error') {\n return { state: 'error', error: action.error }\n }\n return state\n },\n {\n state: 'initial',\n }\n )\n function copy() {\n if (isPending) {\n return\n }\n\n if (!navigator.clipboard) {\n dispatch({\n type: 'error',\n error: new Error('Copy to clipboard is not supported in this browser'),\n })\n } else {\n dispatch({ type: 'copying' })\n navigator.clipboard.writeText(content).then(\n () => {\n dispatch({ type: 'copied' })\n },\n (error) => {\n dispatch({ type: 'error', error })\n }\n )\n }\n }\n const reset = React.useCallback(() => {\n dispatch({ type: 'reset' })\n }, [])\n\n const isPending = copyState.state === 'pending'\n\n return [copyState, copy, reset, isPending] as const\n}\n\nfunction useCopyModern(content: string) {\n type CopyState =\n \| {\n state: 'initial'\n }\n \| {\n state: 'error'\n error: unknown\n }\n \| { state: 'success' }\n\n const [copyState, dispatch, isPending] = React.useActionState(\n (\n state: CopyState,\n action: 'reset' \| 'copy'\n ): CopyState \| Promise<CopyState> => {\n if (action === 'reset') {\n return { state: 'initial' }\n }\n if (action === 'copy') {\n if (!navigator.clipboard) {\n return {\n state: 'error',\n error: new Error(\n 'Copy to clipboard is not supported in this browser'\n ),\n }\n }\n return navigator.clipboard.writeText(content).then(\n () => {\n return { state: 'success' }\n },\n (error) => {\n return { state: 'error', error }\n }\n )\n }\n return state\n },\n {\n state: 'initial',\n }\n )\n\n function copy() {\n React.startTransition(() => {\n dispatch('copy')\n })\n }\n\n const reset = React.useCallback(() => {\n dispatch('reset')\n }, [\n // TODO: `dispatch` from `useActionState` is not reactive.\n // Remove from dependencies once https://github.com/facebook/react/pull/29665 is released.\n dispatch,\n ])\n\n return [copyState, copy, reset, isPending] as const\n}\n\nconst useCopy =\n typeof React.useActionState === 'function' ? useCopyModern : useCopyLegacy\n\nexport function CopyButton({\n actionLabel,\n successLabel,\n content,\n icon,\n disabled,\n ...props\n}: React.HTMLProps<HTMLButtonElement> & {\n actionLabel: string\n successLabel: string\n content: string\n icon?: React.ReactNode\n}) {\n const [copyState, copy, reset, isPending] = useCopy(content)\n\n const error = copyState.state === 'error' ? copyState.error : null\n React.useEffect(() => {\n if (error !== null) {\n // Additional console.error to get the stack.\n console.error(error)\n }\n }, [error])\n React.useEffect(() => {\n if (copyState.state === 'success') {\n const timeoutId = setTimeout(() => {\n reset()\n }, 2000)\n\n return () => {\n clearTimeout(timeoutId)\n }\n }\n }, [isPending, copyState.state, reset])\n const isDisabled = isPending \|\| disabled\n const label = copyState.state === 'success' ? successLabel : actionLabel\n\n // Assign default icon\n const renderedIcon =\n copyState.state === 'success' ? (\n <CopySuccessIcon />\n ) : (\n icon \|\| (\n <CopyIcon\n width={14}\n height={14}\n className=\"error-overlay-toolbar-button-icon\"\n />\n )\n )\n\n return (\n <button\n {...props}\n type=\"button\"\n title={label}\n aria-label={label}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n data-nextjs-copy-button\n className={cx(\n props.className,\n 'nextjs-data-copy-button',\n `nextjs-data-copy-button--${copyState.state}`\n )}\n onClick={() => {\n if (!isDisabled) {\n copy()\n }\n }}\n >\n {renderedIcon}\n {copyState.state === 'error' ? ` ${copyState.error}` : null}\n </button>\n )\n}\n\nfunction CopyIcon(props: React.SVGProps<SVGSVGElement>) {\n return (\n <svg\n width=\"14\"\n height=\"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=\"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\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nfunction CopySuccessIcon() {\n return (\n <svg\n height=\"16\"\n xlinkTitle=\"copied\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n stroke=\"currentColor\"\n fill=\"currentColor\"\n >\n <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\" />\n </svg>\n )\n}\n\nexport const COPY_BUTTON_STYLES = css`\n .nextjs-data-copy-button {\n color: inherit;\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`\n"],"names":["COPY_BUTTON_STYLES","CopyButton","useCopyLegacy","content","copyState","dispatch","React","useReducer","state","action","type","error","copy","isPending","navigator","clipboard","Error","writeText","then","reset","useCallback","useCopyModern","useActionState","startTransition","useCopy","actionLabel","successLabel","icon","disabled","props","useEffect","console","timeoutId","setTimeout","clearTimeout","isDisabled","label","renderedIcon","CopySuccessIcon","CopyIcon","width","height","className","button","title","aria-label","aria-disabled","data-nextjs-copy-button","cx","onClick","svg","fill","xmlns","path","fillRule","clipRule","d","xlinkTitle","viewBox","stroke","css"],"mappings":"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"}

package/dist/client/components/react-dev-overlay/_experimental/internal/components/dialog/dialog.js CHANGED Viewed

@@ -17,7 +17,8 @@ const CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE = [
     '[data-next-mark]',
     '[data-issues-open]',
     '#nextjs-dev-tools-menu',
-    '[data-nextjs-error-overlay-nav]'
+    '[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;

package/dist/client/components/react-dev-overlay/_experimental/internal/components/dialog/dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/dialog/dialog.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useOnClickOutside } from '../../hooks/use-on-click-outside'\nimport { useMeasureHeight } from '../../hooks/use-measure-height'\n\nexport type DialogProps = {\n children?: React.ReactNode\n type: 'error' \| 'warning'\n 'aria-labelledby': string\n 'aria-describedby': string\n className?: string\n onClose?: () => void\n dialogResizerRef?: React.RefObject<HTMLDivElement \| null>\n}\n\nconst CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE = [\n '[data-next-mark]',\n '[data-issues-open]',\n '#nextjs-dev-tools-menu',\n '[data-nextjs-error-overlay-nav]',\n]\n\nconst Dialog: React.FC<DialogProps> = function Dialog({\n children,\n type,\n className,\n onClose,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n dialogResizerRef,\n ...props\n}) {\n const [dialog, setDialog] = React.useState<HTMLDivElement \| null>(null)\n const [role, setRole] = React.useState<string \| undefined>(\n typeof document !== 'undefined' && document.hasFocus()\n ? 'dialog'\n : undefined\n )\n\n const ref = React.useRef<HTMLDivElement \| null>(null)\n const [height, pristine] = useMeasureHeight(ref)\n\n const onDialog = React.useCallback((node: HTMLDivElement \| null) => {\n setDialog(node)\n }, [])\n\n useOnClickOutside(dialog, CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE, (e) => {\n e.preventDefault()\n return onClose?.()\n })\n\n React.useEffect(() => {\n if (dialog == null) {\n return\n }\n\n function handleFocus() {\n // safari will force itself as the active application when a background page triggers any sort of autofocus\n // this is a workaround to only set the dialog role if the document has focus\n setRole(document.hasFocus() ? 'dialog' : undefined)\n }\n\n window.addEventListener('focus', handleFocus)\n window.addEventListener('blur', handleFocus)\n return () => {\n window.removeEventListener('focus', handleFocus)\n window.removeEventListener('blur', handleFocus)\n }\n }, [dialog])\n\n React.useEffect(() => {\n const root = dialog?.getRootNode()\n const activeElement =\n root instanceof ShadowRoot ? (root?.activeElement as HTMLElement) : null\n\n // Trap focus within the dialog\n dialog?.focus()\n\n return () => {\n // Blur first to avoid getting stuck, in case `activeElement` is missing\n dialog?.blur()\n // Restore focus to the previously active element\n activeElement?.focus()\n }\n }, [dialog])\n\n return (\n <div\n ref={onDialog}\n data-nextjs-dialog\n tabIndex={1}\n role={role}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-modal=\"true\"\n className={className}\n onKeyDown={(e) => {\n if (e.key === 'Escape') {\n onClose?.()\n }\n }}\n {...props}\n >\n <div\n ref={dialogResizerRef}\n data-nextjs-dialog-sizer\n // [x] Don't animate on initial load\n // [x] No duplicate elements\n // [x] Responds to content growth\n style={{\n height,\n transition: pristine ? undefined : 'height 250ms var(--timing-swift)',\n }}\n >\n <div ref={ref}>{children}</div>\n </div>\n </div>\n )\n}\n\nexport { Dialog }\n"],"names":["Dialog","CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE","children","type","className","onClose","ariaLabelledBy","ariaDescribedBy","dialogResizerRef","props","dialog","setDialog","React","useState","role","setRole","document","hasFocus","undefined","ref","useRef","height","pristine","useMeasureHeight","onDialog","useCallback","node","useOnClickOutside","e","preventDefault","useEffect","handleFocus","window","addEventListener","removeEventListener","root","getRootNode","activeElement","ShadowRoot","focus","blur","div","data-nextjs-dialog","tabIndex","aria-labelledby","aria-describedby","aria-modal","onKeyDown","key","data-nextjs-dialog-sizer","style","transition"],"mappings":";;;;+~~BAuHSA~~;;;eAAAA;;;;;~~iEAvHc~~;mCACW;kCACD;AAYjC,MAAMC,4CAA4C;IAChD;IACA;IACA;IACA;CACD;AAED,MAAMD,SAAgC,SAASA,OAAO,KASrD;IATqD,IAAA,EACpDE,QAAQ,EACRC,IAAI,EACJC,SAAS,EACTC,OAAO,EACP,mBAAmBC,cAAc,EACjC,oBAAoBC,eAAe,EACnCC,gBAAgB,EAChB,GAAGC,OACJ,GATqD;IAUpD,MAAM,CAACC,QAAQC,UAAU,GAAGC,OAAMC,QAAQ,CAAwB;IAClE,MAAM,CAACC,MAAMC,QAAQ,GAAGH,OAAMC,QAAQ,CACpC,OAAOG,aAAa,eAAeA,SAASC,QAAQ,KAChD,WACAC;IAGN,MAAMC,MAAMP,OAAMQ,MAAM,CAAwB;IAChD,MAAM,CAACC,QAAQC,SAAS,GAAGC,IAAAA,kCAAgB,EAACJ;IAE5C,MAAMK,WAAWZ,OAAMa,WAAW,CAAC,CAACC;QAClCf,UAAUe;IACZ,GAAG,EAAE;IAELC,IAAAA,oCAAiB,EAACjB,QAAQT,2CAA2C,CAAC2B;QACpEA,EAAEC,cAAc;QAChB,OAAOxB,2BAAAA;IACT;IAEAO,OAAMkB,SAAS,CAAC;QACd,IAAIpB,UAAU,MAAM;YAClB;QACF;QAEA,SAASqB;YACP,2GAA2G;YAC3G,6EAA6E;YAC7EhB,QAAQC,SAASC,QAAQ,KAAK,WAAWC;QAC3C;QAEAc,OAAOC,gBAAgB,CAAC,SAASF;QACjCC,OAAOC,gBAAgB,CAAC,QAAQF;QAChC,OAAO;YACLC,OAAOE,mBAAmB,CAAC,SAASH;YACpCC,OAAOE,mBAAmB,CAAC,QAAQH;QACrC;IACF,GAAG;QAACrB;KAAO;IAEXE,OAAMkB,SAAS,CAAC;QACd,MAAMK,OAAOzB,0BAAAA,OAAQ0B,WAAW;QAChC,MAAMC,gBACJF,gBAAgBG,aAAcH,wBAAAA,KAAME,aAAa,GAAmB;QAEtE,+BAA+B;QAC/B3B,0BAAAA,OAAQ6B,KAAK;QAEb,OAAO;YACL,wEAAwE;YACxE7B,0BAAAA,OAAQ8B,IAAI;YACZ,iDAAiD;YACjDH,iCAAAA,cAAeE,KAAK;QACtB;IACF,GAAG;QAAC7B;KAAO;IAEX,qBACE,qBAAC+B;QACCtB,KAAKK;QACLkB,oBAAkB;QAClBC,UAAU;QACV7B,MAAMA;QACN8B,mBAAiBtC;QACjBuC,oBAAkBtC;QAClBuC,cAAW;QACX1C,WAAWA;QACX2C,WAAW,CAACnB;YACV,IAAIA,EAAEoB,GAAG,KAAK,UAAU;gBACtB3C,2BAAAA;YACF;QACF;QACC,GAAGI,KAAK;kBAET,cAAA,qBAACgC;YACCtB,KAAKX;YACLyC,0BAAwB;YACxB,oCAAoC;YACpC,4BAA4B;YAC5B,iCAAiC;YACjCC,OAAO;gBACL7B;gBACA8B,YAAY7B,WAAWJ,YAAY;YACrC;sBAEA,cAAA,qBAACuB;gBAAItB,KAAKA;0BAAMjB;;;;AAIxB"}
1	+ {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/dialog/dialog.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useOnClickOutside } from '../../hooks/use-on-click-outside'\nimport { useMeasureHeight } from '../../hooks/use-measure-height'\n\nexport type DialogProps = {\n children?: React.ReactNode\n type: 'error' \| 'warning'\n 'aria-labelledby': string\n 'aria-describedby': string\n className?: string\n onClose?: () => void\n dialogResizerRef?: React.RefObject<HTMLDivElement \| null>\n}\n\nconst CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE = [\n '[data-next-mark]',\n '[data-issues-open]',\n '#nextjs-dev-tools-menu',\n '[data-nextjs-error-overlay-nav]',\n '[data-info-popover]',\n]\n\nconst Dialog: React.FC<DialogProps> = function Dialog({\n children,\n type,\n className,\n onClose,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n dialogResizerRef,\n ...props\n}) {\n const [dialog, setDialog] = React.useState<HTMLDivElement \| null>(null)\n const [role, setRole] = React.useState<string \| undefined>(\n typeof document !== 'undefined' && document.hasFocus()\n ? 'dialog'\n : undefined\n )\n\n const ref = React.useRef<HTMLDivElement \| null>(null)\n const [height, pristine] = useMeasureHeight(ref)\n\n const onDialog = React.useCallback((node: HTMLDivElement \| null) => {\n setDialog(node)\n }, [])\n\n useOnClickOutside(dialog, CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE, (e) => {\n e.preventDefault()\n return onClose?.()\n })\n\n React.useEffect(() => {\n if (dialog == null) {\n return\n }\n\n function handleFocus() {\n // safari will force itself as the active application when a background page triggers any sort of autofocus\n // this is a workaround to only set the dialog role if the document has focus\n setRole(document.hasFocus() ? 'dialog' : undefined)\n }\n\n window.addEventListener('focus', handleFocus)\n window.addEventListener('blur', handleFocus)\n return () => {\n window.removeEventListener('focus', handleFocus)\n window.removeEventListener('blur', handleFocus)\n }\n }, [dialog])\n\n React.useEffect(() => {\n const root = dialog?.getRootNode()\n const activeElement =\n root instanceof ShadowRoot ? (root?.activeElement as HTMLElement) : null\n\n // Trap focus within the dialog\n dialog?.focus()\n\n return () => {\n // Blur first to avoid getting stuck, in case `activeElement` is missing\n dialog?.blur()\n // Restore focus to the previously active element\n activeElement?.focus()\n }\n }, [dialog])\n\n return (\n <div\n ref={onDialog}\n data-nextjs-dialog\n tabIndex={1}\n role={role}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-modal=\"true\"\n className={className}\n onKeyDown={(e) => {\n if (e.key === 'Escape') {\n onClose?.()\n }\n }}\n {...props}\n >\n <div\n ref={dialogResizerRef}\n data-nextjs-dialog-sizer\n // [x] Don't animate on initial load\n // [x] No duplicate elements\n // [x] Responds to content growth\n style={{\n height,\n transition: pristine ? undefined : 'height 250ms var(--timing-swift)',\n }}\n >\n <div ref={ref}>{children}</div>\n </div>\n </div>\n )\n}\n\nexport { Dialog }\n"],"names":["Dialog","CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE","children","type","className","onClose","ariaLabelledBy","ariaDescribedBy","dialogResizerRef","props","dialog","setDialog","React","useState","role","setRole","document","hasFocus","undefined","ref","useRef","height","pristine","useMeasureHeight","onDialog","useCallback","node","useOnClickOutside","e","preventDefault","useEffect","handleFocus","window","addEventListener","removeEventListener","root","getRootNode","activeElement","ShadowRoot","focus","blur","div","data-nextjs-dialog","tabIndex","aria-labelledby","aria-describedby","aria-modal","onKeyDown","key","data-nextjs-dialog-sizer","style","transition"],"mappings":";;;;+BAwHSA;;;eAAAA;;;;;iEAxHc;mCACW;kCACD;AAYjC,MAAMC,4CAA4C;IAChD;IACA;IACA;IACA;IACA;CACD;AAED,MAAMD,SAAgC,SAASA,OAAO,KASrD;IATqD,IAAA,EACpDE,QAAQ,EACRC,IAAI,EACJC,SAAS,EACTC,OAAO,EACP,mBAAmBC,cAAc,EACjC,oBAAoBC,eAAe,EACnCC,gBAAgB,EAChB,GAAGC,OACJ,GATqD;IAUpD,MAAM,CAACC,QAAQC,UAAU,GAAGC,OAAMC,QAAQ,CAAwB;IAClE,MAAM,CAACC,MAAMC,QAAQ,GAAGH,OAAMC,QAAQ,CACpC,OAAOG,aAAa,eAAeA,SAASC,QAAQ,KAChD,WACAC;IAGN,MAAMC,MAAMP,OAAMQ,MAAM,CAAwB;IAChD,MAAM,CAACC,QAAQC,SAAS,GAAGC,IAAAA,kCAAgB,EAACJ;IAE5C,MAAMK,WAAWZ,OAAMa,WAAW,CAAC,CAACC;QAClCf,UAAUe;IACZ,GAAG,EAAE;IAELC,IAAAA,oCAAiB,EAACjB,QAAQT,2CAA2C,CAAC2B;QACpEA,EAAEC,cAAc;QAChB,OAAOxB,2BAAAA;IACT;IAEAO,OAAMkB,SAAS,CAAC;QACd,IAAIpB,UAAU,MAAM;YAClB;QACF;QAEA,SAASqB;YACP,2GAA2G;YAC3G,6EAA6E;YAC7EhB,QAAQC,SAASC,QAAQ,KAAK,WAAWC;QAC3C;QAEAc,OAAOC,gBAAgB,CAAC,SAASF;QACjCC,OAAOC,gBAAgB,CAAC,QAAQF;QAChC,OAAO;YACLC,OAAOE,mBAAmB,CAAC,SAASH;YACpCC,OAAOE,mBAAmB,CAAC,QAAQH;QACrC;IACF,GAAG;QAACrB;KAAO;IAEXE,OAAMkB,SAAS,CAAC;QACd,MAAMK,OAAOzB,0BAAAA,OAAQ0B,WAAW;QAChC,MAAMC,gBACJF,gBAAgBG,aAAcH,wBAAAA,KAAME,aAAa,GAAmB;QAEtE,+BAA+B;QAC/B3B,0BAAAA,OAAQ6B,KAAK;QAEb,OAAO;YACL,wEAAwE;YACxE7B,0BAAAA,OAAQ8B,IAAI;YACZ,iDAAiD;YACjDH,iCAAAA,cAAeE,KAAK;QACtB;IACF,GAAG;QAAC7B;KAAO;IAEX,qBACE,qBAAC+B;QACCtB,KAAKK;QACLkB,oBAAkB;QAClBC,UAAU;QACV7B,MAAMA;QACN8B,mBAAiBtC;QACjBuC,oBAAkBtC;QAClBuC,cAAW;QACX1C,WAAWA;QACX2C,WAAW,CAACnB;YACV,IAAIA,EAAEoB,GAAG,KAAK,UAAU;gBACtB3C,2BAAAA;YACF;QACF;QACC,GAAGI,KAAK;kBAET,cAAA,qBAACgC;YACCtB,KAAKX;YACLyC,0BAAwB;YACxB,oCAAoC;YACpC,4BAA4B;YAC5B,iCAAiC;YACjCC,OAAO;gBACL7B;gBACA8B,YAAY7B,WAAWJ,YAAY;YACrC;sBAEA,cAAA,qBAACuB;gBAAItB,KAAKA;0BAAMjB;;;;AAIxB"}

package/dist/client/components/react-dev-overlay/_experimental/internal/components/dialog/styles.js CHANGED Viewed

@@ -12,7 +12,7 @@ const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_
 const _nooptemplate = require("../../helpers/noop-template");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
-        "\n  [data-nextjs-dialog-root] {\n    --next-dialog-radius: var(--rounded-xl);\n    --next-dialog-footer-height: 48px;\n    --next-dialog-max-width: 960px;\n    --next-dialog-row-padding: 16px;\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  }\n\n  ",
+        "\n  [data-nextjs-dialog-root] {\n    --next-dialog-radius: var(--rounded-xl);\n    --next-dialog-footer-height: 48px;\n    --next-dialog-max-width: 960px;\n    --next-dialog-row-padding: 16px;\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    display: none;\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: var(--size-4) var(--size-3);\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: var(--size-2);\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"
     ]);
     _templateObject = function() {

package/dist/client/components/react-dev-overlay/_experimental/internal/components/dialog/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/dialog/styles.ts"],"sourcesContent":["import { noop as css } from '../../helpers/noop-template'\n\nconst styles = css`\n [data-nextjs-dialog-root] {\n --next-dialog-radius: var(--rounded-xl);\n --next-dialog-footer-height: 48px;\n --next-dialog-max-width: 960px;\n --next-dialog-row-padding: 16px;\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 }\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: var(--size-4) var(--size-3);\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: var(--size-2);\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","css"],"mappings":";;;;+~~BAuHSA~~;;;eAAAA;;;;~~8BAvHmB~~;;;;;;;;;;;AAE5B,MAAMA,aAASC,kBAAG,~~qBA+Bd~~,GAAG,gFAAgF"}
1	+ {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/dialog/styles.ts"],"sourcesContent":["import { noop as css } from '../../helpers/noop-template'\n\nconst styles = css`\n [data-nextjs-dialog-root] {\n --next-dialog-radius: var(--rounded-xl);\n --next-dialog-footer-height: 48px;\n --next-dialog-max-width: 960px;\n --next-dialog-row-padding: 16px;\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 display: none;\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: var(--size-4) var(--size-3);\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: var(--size-2);\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","css"],"mappings":";;;;+BA2HSA;;;eAAAA;;;;8BA3HmB;;;;;;;;;;;AAE5B,MAAMA,aAASC,kBAAG,qBAmCd,GAAG,gFAAgF"}

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.d.ts CHANGED Viewed

@@ -2,9 +2,10 @@ import type { Dispatch, SetStateAction } from 'react';
 import type { OverlayState } from '../../../../../shared';
 declare const INDICATOR_POSITION: "top-left" | "top-right" | "bottom-left" | "bottom-right";
 type DevToolsIndicatorPosition = typeof INDICATOR_POSITION;
-export declare function DevToolsIndicator({ state, errorCount, setIsErrorOverlayOpen, position, }: {
+export declare function DevToolsIndicator({ state, errorCount, isBuildError, setIsErrorOverlayOpen, position, }: {
     state: OverlayState;
     errorCount: number;
+    isBuildError: boolean;
     setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>;
     position?: DevToolsIndicatorPosition;
 }): false | import("react/jsx-runtime").JSX.Element;

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.js CHANGED Viewed

@@ -29,6 +29,9 @@ const _initializefornewoverlay = require("../../../../../../../dev/dev-build-ind
 const _devrenderindicator = require("./internal/dev-render-indicator");
 const _usedelayedrender = require("../../../hooks/use-delayed-render");
 const _nooptemplate = require("../../../helpers/noop-template");
+const _turbopackinfo = require("./dev-tools-info/turbopack-info");
+const _routeinfo = require("./dev-tools-info/route-info");
+const _stopicon = require("../../../icons/stop-icon");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
         "\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: 36px;\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\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-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-value {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\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: 41px;\n    height: 24px;\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: 13px;\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: 8px;\n      height: 8px;\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: var(--size-1);\n\n    kbd {\n      width: var(--size-5);\n      height: var(--size-5);\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-font-smaller);\n      line-height: var(--size-4);\n    }\n  }\n"
@@ -41,7 +44,7 @@ function _templateObject() {
 // 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, setIsErrorOverlayOpen, position = INDICATOR_POSITION } = param;
+    let { state, errorCount, isBuildError, setIsErrorOverlayOpen, position = INDICATOR_POSITION } = param;
     const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = (0, _react.useState)(true);
     return isDevToolsIndicatorOpen && /*#__PURE__*/ (0, _jsxruntime.jsx)(DevToolsPopover, {
         semver: state.versionInfo.installed,
@@ -52,7 +55,9 @@ function DevToolsIndicator(param) {
         },
         setIsErrorOverlayOpen: setIsErrorOverlayOpen,
         isTurbopack: !!process.env.TURBOPACK,
-        position: position
+        position: position,
+        disabled: state.disableDevIndicator,
+        isBuildError: isBuildError
     });
 }
 //////////////////////////////////////////////////////////////////////////////////////
@@ -60,21 +65,39 @@ const ANIMATE_OUT_DURATION_MS = 200;
 const ANIMATE_OUT_TIMING_FUNCTION = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)';
 const Context = /*#__PURE__*/ (0, _react.createContext)({});
 function DevToolsPopover(param) {
-    let { issueCount, isStaticRoute, isTurbopack, position, hide, setIsErrorOverlayOpen } = param;
+    let { disabled, issueCount, isStaticRoute, isTurbopack, position, isBuildError, hide, setIsErrorOverlayOpen } = param;
     const menuRef = (0, _react.useRef)(null);
     const triggerRef = (0, _react.useRef)(null);
+    const turbopackRef = (0, _react.useRef)(null);
+    const triggerTurbopackRef = (0, _react.useRef)(null);
+    const routeInfoRef = (0, _react.useRef)(null);
+    const triggerRouteInfoRef = (0, _react.useRef)(null);
     const [isMenuOpen, setIsMenuOpen] = (0, _react.useState)(false);
+    const [isTurbopackInfoOpen, setIsTurbopackInfoOpen] = (0, _react.useState)(false);
+    const [isRouteInfoOpen, setIsRouteInfoOpen] = (0, _react.useState)(false);
     const [selectedIndex, setSelectedIndex] = (0, _react.useState)(-1);
     // This hook lets us do an exit animation before unmounting the component
-    const { mounted, rendered } = (0, _usedelayedrender.useDelayedRender)(isMenuOpen, {
+    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: ANIMATE_OUT_DURATION_MS
     });
+    const { mounted: turbopackInfoMounted, rendered: turbopackInfoRendered } = (0, _usedelayedrender.useDelayedRender)(isTurbopackInfoOpen, {
+        enterDelay: 0,
+        exitDelay: ANIMATE_OUT_DURATION_MS
+    });
+    const { mounted: routeInfoMounted, rendered: routeInfoRendered } = (0, _usedelayedrender.useDelayedRender)(isRouteInfoOpen, {
+        enterDelay: 0,
+        exitDelay: ANIMATE_OUT_DURATION_MS
+    });
     // Features to make the menu accessible
     useFocusTrap(menuRef, triggerRef, isMenuOpen);
     useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu);
+    useFocusTrap(turbopackRef, triggerTurbopackRef, isTurbopackInfoOpen);
+    useClickOutside(turbopackRef, triggerTurbopackRef, isTurbopackInfoOpen, closeTurbopackInfo);
+    useFocusTrap(routeInfoRef, triggerRouteInfoRef, isRouteInfoOpen);
+    useClickOutside(routeInfoRef, triggerRouteInfoRef, isRouteInfoOpen, closeRouteInfo);
     function select(index) {
         var _menuRef_current;
         if (index === 'first') {
@@ -158,6 +181,12 @@ function DevToolsPopover(param) {
             setSelectedIndex(-1);
         }, ANIMATE_OUT_DURATION_MS);
     }
+    function closeTurbopackInfo() {
+        setIsTurbopackInfoOpen(false);
+    }
+    function closeRouteInfo() {
+        setIsRouteInfoOpen(false);
+    }
     const [vertical, horizontal] = position.split('-', 2);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_toast.Toast, {
         "data-nextjs-toast": true,
@@ -178,14 +207,39 @@ function DevToolsPopover(param) {
                 "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,
                 onKeyDown: onTriggerKeydown,
                 openErrorOverlay: openErrorOverlay,
                 isDevBuilding: (0, _initializefornewoverlay.useIsDevBuilding)(),
-                isDevRendering: (0, _devrenderindicator.useIsDevRendering)()
+                isDevRendering: (0, _devrenderindicator.useIsDevRendering)(),
+                isBuildError: isBuildError
             }),
-            mounted && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            routeInfoMounted && /*#__PURE__*/ (0, _jsxruntime.jsx)(_routeinfo.RouteInfo, {
+                ref: routeInfoRef,
+                routeType: isStaticRoute ? 'Static' : 'Dynamic',
+                isOpen: isRouteInfoOpen,
+                setIsOpen: setIsRouteInfoOpen,
+                setPreviousOpen: setIsMenuOpen,
+                style: {
+                    [vertical]: 'calc(100% + var(--size-gap))',
+                    [horizontal]: 0
+                },
+                "data-rendered": routeInfoRendered
+            }),
+            turbopackInfoMounted && /*#__PURE__*/ (0, _jsxruntime.jsx)(_turbopackinfo.TurbopackInfo, {
+                ref: turbopackRef,
+                isOpen: isTurbopackInfoOpen,
+                setIsOpen: setIsTurbopackInfoOpen,
+                setPreviousOpen: setIsMenuOpen,
+                style: {
+                    [vertical]: 'calc(100% + var(--size-gap))',
+                    [horizontal]: 0
+                },
+                "data-rendered": turbopackInfoRendered
+            }),
+            menuMounted && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 ref: menuRef,
                 id: "nextjs-dev-tools-menu",
                 role: "menu",
@@ -195,7 +249,7 @@ function DevToolsPopover(param) {
                 tabIndex: -1,
                 className: "dev-tools-indicator-menu",
                 onKeyDown: onMenuKeydown,
-                "data-rendered": rendered,
+                "data-rendered": menuRendered,
                 style: {
                     '--animate-out-duration-ms': "" + ANIMATE_OUT_DURATION_MS + "ms",
                     '--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION,
@@ -222,17 +276,19 @@ function DevToolsPopover(param) {
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
                                     label: "Route",
+                                    index: 1,
                                     value: isStaticRoute ? 'Static' : 'Dynamic',
+                                    onClick: ()=>setIsRouteInfoOpen(true),
                                     "data-nextjs-route-type": isStaticRoute ? 'static' : 'dynamic'
                                 }),
                                 isTurbopack ? /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
                                     label: "Turbopack",
                                     value: "Enabled"
                                 }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
-                                    index: 1,
+                                    index: 2,
                                     label: "Try Turbopack",
-                                    value: /*#__PURE__*/ (0, _jsxruntime.jsx)(ExternalIcon, {}),
-                                    href: "https://nextjs.org/docs/app/api-reference/turbopack"
+                                    value: /*#__PURE__*/ (0, _jsxruntime.jsx)(ChevronRight, {}),
+                                    onClick: ()=>setIsTurbopackInfoOpen(true)
                                 })
                             ]
                         }),
@@ -241,11 +297,9 @@ function DevToolsPopover(param) {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
                                 "data-hide-dev-tools": true,
                                 label: "Hide Dev Tools",
-                                value: /*#__PURE__*/ (0, _jsxruntime.jsx)(_nextlogo.Cross, {
-                                    color: "var(--color-gray-900)"
-                                }),
+                                value: /*#__PURE__*/ (0, _jsxruntime.jsx)(_stopicon.StopIcon, {}),
                                 onClick: hide,
-                                index: isTurbopack ? 1 : 2
+                                index: isTurbopack ? 2 : 3
                             })
                         })
                     ]
@@ -254,6 +308,20 @@ function DevToolsPopover(param) {
         ]
     });
 }
+function ChevronRight() {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "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';
@@ -367,23 +435,6 @@ function useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu) {
         isMenuOpen
     ]);
 }
-//////////////////////////////////////////////////////////////////////////////////////
-function ExternalIcon() {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
-        width: "16",
-        height: "16",
-        viewBox: "0 0 16 16",
-        fill: "none",
-        role: "img",
-        "aria-label": "External link",
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M13.5 10.25V13.25C13.5 13.3881 13.3881 13.5 13.25 13.5H2.75C2.61193 13.5 2.5 13.3881 2.5 13.25L2.5 2.75C2.5 2.61193 2.61193 2.5 2.75 2.5H5.75H6.5V1H5.75H2.75C1.7835 1 1 1.7835 1 2.75V13.25C1 14.2165 1.7835 15 2.75 15H13.25C14.2165 15 15 14.2165 15 13.25V10.25V9.5H13.5V10.25ZM9 1H9.75H14.2495C14.6637 1 14.9995 1.33579 14.9995 1.75V6.25V7H13.4995V6.25V3.56066L8.53033 8.52978L8 9.06011L6.93934 7.99945L7.46967 7.46912L12.4388 2.5H9.75H9V1Z",
-            fill: "currentColor"
-        })
-    });
-}
 const DEV_TOOLS_INDICATOR_STYLES = (0, _nooptemplate.noop)(_templateObject());
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {