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

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

@@ -1,7 +1,7 @@
 import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
 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;
@@ -177,8 +177,8 @@ export function CopyButton(param) {
         "aria-label": label,
         "aria-disabled": isDisabled,
         disabled: isDisabled,
-        "data-nextjs-data-runtime-error-copy-button": true,
-        className: cx(props.className, 'nextjs-data-runtime-error-copy-button', "nextjs-data-runtime-error-copy-button--" + copyState.state),
+        "data-nextjs-copy-button": true,
+        className: cx(props.className, 'nextjs-data-copy-button', "nextjs-data-copy-button--" + copyState.state),
         onClick: ()=>{
             if (!isDisabled) {
                 copy();

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

@@ -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":["React","noop","css","cx","useCopyLegacy","content","copyState","dispatch","useReducer","state","action","type","error","copy","isPending","navigator","clipboard","Error","writeText","then","reset","useCallback","useCopyModern","useActionState","startTransition","useCopy","CopyButton","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","onClick","svg","fill","xmlns","path","fillRule","clipRule","d","xlinkTitle","viewBox","stroke","COPY_BUTTON_STYLES"],"mappings":"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"}
+{"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":["React","noop","css","cx","useCopyLegacy","content","copyState","dispatch","useReducer","state","action","type","error","copy","isPending","navigator","clipboard","Error","writeText","then","reset","useCallback","useCopyModern","useActionState","startTransition","useCopy","CopyButton","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","onClick","svg","fill","xmlns","path","fillRule","clipRule","d","xlinkTitle","viewBox","stroke","COPY_BUTTON_STYLES"],"mappings":"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"}

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

@@ -6,7 +6,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/esm/client/components/react-dev-overlay/_experimental/internal/components/dialog/dialog.js.map

@@ -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":["React","useOnClickOutside","useMeasureHeight","CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE","Dialog","children","type","className","onClose","ariaLabelledBy","ariaDescribedBy","dialogResizerRef","props","dialog","setDialog","useState","role","setRole","document","hasFocus","undefined","ref","useRef","height","pristine","onDialog","useCallback","node","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":";AAAA,YAAYA,WAAW,QAAO;AAC9B,SAASC,iBAAiB,QAAQ,mCAAkC;AACpE,SAASC,gBAAgB,QAAQ,iCAAgC;AAYjE,MAAMC,4CAA4C;IAChD;IACA;IACA;IACA;CACD;AAED,MAAMC,SAAgC,SAASA,OAAO,KASrD;IATqD,IAAA,EACpDC,QAAQ,EACRC,IAAI,EACJC,SAAS,EACTC,OAAO,EACP,mBAAmBC,cAAc,EACjC,oBAAoBC,eAAe,EACnCC,gBAAgB,EAChB,GAAGC,OACJ,GATqD;IAUpD,MAAM,CAACC,QAAQC,UAAU,GAAGd,MAAMe,QAAQ,CAAwB;IAClE,MAAM,CAACC,MAAMC,QAAQ,GAAGjB,MAAMe,QAAQ,CACpC,OAAOG,aAAa,eAAeA,SAASC,QAAQ,KAChD,WACAC;IAGN,MAAMC,MAAMrB,MAAMsB,MAAM,CAAwB;IAChD,MAAM,CAACC,QAAQC,SAAS,GAAGtB,iBAAiBmB;IAE5C,MAAMI,WAAWzB,MAAM0B,WAAW,CAAC,CAACC;QAClCb,UAAUa;IACZ,GAAG,EAAE;IAEL1B,kBAAkBY,QAAQV,2CAA2C,CAACyB;QACpEA,EAAEC,cAAc;QAChB,OAAOrB,2BAAAA;IACT;IAEAR,MAAM8B,SAAS,CAAC;QACd,IAAIjB,UAAU,MAAM;YAClB;QACF;QAEA,SAASkB;YACP,2GAA2G;YAC3G,6EAA6E;YAC7Ed,QAAQC,SAASC,QAAQ,KAAK,WAAWC;QAC3C;QAEAY,OAAOC,gBAAgB,CAAC,SAASF;QACjCC,OAAOC,gBAAgB,CAAC,QAAQF;QAChC,OAAO;YACLC,OAAOE,mBAAmB,CAAC,SAASH;YACpCC,OAAOE,mBAAmB,CAAC,QAAQH;QACrC;IACF,GAAG;QAAClB;KAAO;IAEXb,MAAM8B,SAAS,CAAC;QACd,MAAMK,OAAOtB,0BAAAA,OAAQuB,WAAW;QAChC,MAAMC,gBACJF,gBAAgBG,aAAcH,wBAAAA,KAAME,aAAa,GAAmB;QAEtE,+BAA+B;QAC/BxB,0BAAAA,OAAQ0B,KAAK;QAEb,OAAO;YACL,wEAAwE;YACxE1B,0BAAAA,OAAQ2B,IAAI;YACZ,iDAAiD;YACjDH,iCAAAA,cAAeE,KAAK;QACtB;IACF,GAAG;QAAC1B;KAAO;IAEX,qBACE,KAAC4B;QACCpB,KAAKI;QACLiB,oBAAkB;QAClBC,UAAU;QACV3B,MAAMA;QACN4B,mBAAiBnC;QACjBoC,oBAAkBnC;QAClBoC,cAAW;QACXvC,WAAWA;QACXwC,WAAW,CAACnB;YACV,IAAIA,EAAEoB,GAAG,KAAK,UAAU;gBACtBxC,2BAAAA;YACF;QACF;QACC,GAAGI,KAAK;kBAET,cAAA,KAAC6B;YACCpB,KAAKV;YACLsC,0BAAwB;YACxB,oCAAoC;YACpC,4BAA4B;YAC5B,iCAAiC;YACjCC,OAAO;gBACL3B;gBACA4B,YAAY3B,WAAWJ,YAAY;YACrC;sBAEA,cAAA,KAACqB;gBAAIpB,KAAKA;0BAAMhB;;;;AAIxB;AAEA,SAASD,MAAM,GAAE"}
+{"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":["React","useOnClickOutside","useMeasureHeight","CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE","Dialog","children","type","className","onClose","ariaLabelledBy","ariaDescribedBy","dialogResizerRef","props","dialog","setDialog","useState","role","setRole","document","hasFocus","undefined","ref","useRef","height","pristine","onDialog","useCallback","node","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":";AAAA,YAAYA,WAAW,QAAO;AAC9B,SAASC,iBAAiB,QAAQ,mCAAkC;AACpE,SAASC,gBAAgB,QAAQ,iCAAgC;AAYjE,MAAMC,4CAA4C;IAChD;IACA;IACA;IACA;IACA;CACD;AAED,MAAMC,SAAgC,SAASA,OAAO,KASrD;IATqD,IAAA,EACpDC,QAAQ,EACRC,IAAI,EACJC,SAAS,EACTC,OAAO,EACP,mBAAmBC,cAAc,EACjC,oBAAoBC,eAAe,EACnCC,gBAAgB,EAChB,GAAGC,OACJ,GATqD;IAUpD,MAAM,CAACC,QAAQC,UAAU,GAAGd,MAAMe,QAAQ,CAAwB;IAClE,MAAM,CAACC,MAAMC,QAAQ,GAAGjB,MAAMe,QAAQ,CACpC,OAAOG,aAAa,eAAeA,SAASC,QAAQ,KAChD,WACAC;IAGN,MAAMC,MAAMrB,MAAMsB,MAAM,CAAwB;IAChD,MAAM,CAACC,QAAQC,SAAS,GAAGtB,iBAAiBmB;IAE5C,MAAMI,WAAWzB,MAAM0B,WAAW,CAAC,CAACC;QAClCb,UAAUa;IACZ,GAAG,EAAE;IAEL1B,kBAAkBY,QAAQV,2CAA2C,CAACyB;QACpEA,EAAEC,cAAc;QAChB,OAAOrB,2BAAAA;IACT;IAEAR,MAAM8B,SAAS,CAAC;QACd,IAAIjB,UAAU,MAAM;YAClB;QACF;QAEA,SAASkB;YACP,2GAA2G;YAC3G,6EAA6E;YAC7Ed,QAAQC,SAASC,QAAQ,KAAK,WAAWC;QAC3C;QAEAY,OAAOC,gBAAgB,CAAC,SAASF;QACjCC,OAAOC,gBAAgB,CAAC,QAAQF;QAChC,OAAO;YACLC,OAAOE,mBAAmB,CAAC,SAASH;YACpCC,OAAOE,mBAAmB,CAAC,QAAQH;QACrC;IACF,GAAG;QAAClB;KAAO;IAEXb,MAAM8B,SAAS,CAAC;QACd,MAAMK,OAAOtB,0BAAAA,OAAQuB,WAAW;QAChC,MAAMC,gBACJF,gBAAgBG,aAAcH,wBAAAA,KAAME,aAAa,GAAmB;QAEtE,+BAA+B;QAC/BxB,0BAAAA,OAAQ0B,KAAK;QAEb,OAAO;YACL,wEAAwE;YACxE1B,0BAAAA,OAAQ2B,IAAI;YACZ,iDAAiD;YACjDH,iCAAAA,cAAeE,KAAK;QACtB;IACF,GAAG;QAAC1B;KAAO;IAEX,qBACE,KAAC4B;QACCpB,KAAKI;QACLiB,oBAAkB;QAClBC,UAAU;QACV3B,MAAMA;QACN4B,mBAAiBnC;QACjBoC,oBAAkBnC;QAClBoC,cAAW;QACXvC,WAAWA;QACXwC,WAAW,CAACnB;YACV,IAAIA,EAAEoB,GAAG,KAAK,UAAU;gBACtBxC,2BAAAA;YACF;QACF;QACC,GAAGI,KAAK;kBAET,cAAA,KAAC6B;YACCpB,KAAKV;YACLsC,0BAAwB;YACxB,oCAAoC;YACpC,4BAA4B;YAC5B,iCAAiC;YACjCC,OAAO;gBACL3B;gBACA4B,YAAY3B,WAAWJ,YAAY;YACrC;sBAEA,cAAA,KAACqB;gBAAIpB,KAAKA;0BAAMhB;;;;AAIxB;AAEA,SAASD,MAAM,GAAE"}

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

@@ -1,7 +1,7 @@
 import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
 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/esm/client/components/react-dev-overlay/_experimental/internal/components/dialog/styles.js.map

@@ -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":["noop","css","styles"],"mappings":";;;;;;;;;;;AAAA,SAASA,QAAQC,GAAG,QAAQ,8BAA6B;AAEzD,MAAMC,SAASD,uBA+BX,GAAG,gFAAgF;AAsFvF,SAASC,MAAM,GAAE"}
+{"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":["noop","css","styles"],"mappings":";;;;;;;;;;;AAAA,SAASA,QAAQC,GAAG,QAAQ,8BAA6B;AAEzD,MAAMC,SAASD,uBAmCX,GAAG,gFAAgF;AAsFvF,SAASC,MAAM,GAAE"}

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

@@ -11,15 +11,18 @@ function _templateObject() {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef, createContext, useContext } from 'react';
 import { Toast } from '../../toast';
-import { Cross, NextLogo } from './internal/next-logo';
+import { NextLogo } from './internal/next-logo';
 import { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay';
 import { useIsDevRendering } from './internal/dev-render-indicator';
 import { useDelayedRender } from '../../../hooks/use-delayed-render';
 import { noop as css } from '../../../helpers/noop-template';
+import { TurbopackInfo } from './dev-tools-info/turbopack-info';
+import { RouteInfo } from './dev-tools-info/route-info';
+import { StopIcon } from '../../../icons/stop-icon';
 // TODO: add E2E tests to cover different scenarios
 const INDICATOR_POSITION = process.env.__NEXT_DEV_INDICATOR_POSITION || 'bottom-left';
 export function DevToolsIndicator(param) {
-    let { state, errorCount, setIsErrorOverlayOpen, position = INDICATOR_POSITION } = param;
+    let { state, errorCount, isBuildError, setIsErrorOverlayOpen, position = INDICATOR_POSITION } = param;
     const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = useState(true);
     return isDevToolsIndicatorOpen && /*#__PURE__*/ _jsx(DevToolsPopover, {
         semver: state.versionInfo.installed,
@@ -30,7 +33,9 @@ export function DevToolsIndicator(param) {
         },
         setIsErrorOverlayOpen: setIsErrorOverlayOpen,
         isTurbopack: !!process.env.TURBOPACK,
-        position: position
+        position: position,
+        disabled: state.disableDevIndicator,
+        isBuildError: isBuildError
     });
 }
 //////////////////////////////////////////////////////////////////////////////////////
@@ -38,21 +43,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__*/ createContext({});
 function DevToolsPopover(param) {
-    let { issueCount, isStaticRoute, isTurbopack, position, hide, setIsErrorOverlayOpen } = param;
+    let { disabled, issueCount, isStaticRoute, isTurbopack, position, isBuildError, hide, setIsErrorOverlayOpen } = param;
     const menuRef = useRef(null);
     const triggerRef = useRef(null);
+    const turbopackRef = useRef(null);
+    const triggerTurbopackRef = useRef(null);
+    const routeInfoRef = useRef(null);
+    const triggerRouteInfoRef = useRef(null);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [isTurbopackInfoOpen, setIsTurbopackInfoOpen] = useState(false);
+    const [isRouteInfoOpen, setIsRouteInfoOpen] = useState(false);
     const [selectedIndex, setSelectedIndex] = useState(-1);
     // This hook lets us do an exit animation before unmounting the component
-    const { mounted, rendered } = useDelayedRender(isMenuOpen, {
+    const { mounted: menuMounted, rendered: menuRendered } = 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 } = useDelayedRender(isTurbopackInfoOpen, {
+        enterDelay: 0,
+        exitDelay: ANIMATE_OUT_DURATION_MS
+    });
+    const { mounted: routeInfoMounted, rendered: routeInfoRendered } = 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') {
@@ -136,6 +159,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__*/ _jsxs(Toast, {
         "data-nextjs-toast": true,
@@ -156,14 +185,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: useIsDevBuilding(),
-                isDevRendering: useIsDevRendering()
+                isDevRendering: useIsDevRendering(),
+                isBuildError: isBuildError
             }),
-            mounted && /*#__PURE__*/ _jsx("div", {
+            routeInfoMounted && /*#__PURE__*/ _jsx(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__*/ _jsx(TurbopackInfo, {
+                ref: turbopackRef,
+                isOpen: isTurbopackInfoOpen,
+                setIsOpen: setIsTurbopackInfoOpen,
+                setPreviousOpen: setIsMenuOpen,
+                style: {
+                    [vertical]: 'calc(100% + var(--size-gap))',
+                    [horizontal]: 0
+                },
+                "data-rendered": turbopackInfoRendered
+            }),
+            menuMounted && /*#__PURE__*/ _jsx("div", {
                 ref: menuRef,
                 id: "nextjs-dev-tools-menu",
                 role: "menu",
@@ -173,7 +227,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,
@@ -200,17 +254,19 @@ function DevToolsPopover(param) {
                                 }),
                                 /*#__PURE__*/ _jsx(MenuItem, {
                                     label: "Route",
+                                    index: 1,
                                     value: isStaticRoute ? 'Static' : 'Dynamic',
+                                    onClick: ()=>setIsRouteInfoOpen(true),
                                     "data-nextjs-route-type": isStaticRoute ? 'static' : 'dynamic'
                                 }),
                                 isTurbopack ? /*#__PURE__*/ _jsx(MenuItem, {
                                     label: "Turbopack",
                                     value: "Enabled"
                                 }) : /*#__PURE__*/ _jsx(MenuItem, {
-                                    index: 1,
+                                    index: 2,
                                     label: "Try Turbopack",
-                                    value: /*#__PURE__*/ _jsx(ExternalIcon, {}),
-                                    href: "https://nextjs.org/docs/app/api-reference/turbopack"
+                                    value: /*#__PURE__*/ _jsx(ChevronRight, {}),
+                                    onClick: ()=>setIsTurbopackInfoOpen(true)
                                 })
                             ]
                         }),
@@ -219,11 +275,9 @@ function DevToolsPopover(param) {
                             children: /*#__PURE__*/ _jsx(MenuItem, {
                                 "data-hide-dev-tools": true,
                                 label: "Hide Dev Tools",
-                                value: /*#__PURE__*/ _jsx(Cross, {
-                                    color: "var(--color-gray-900)"
-                                }),
+                                value: /*#__PURE__*/ _jsx(StopIcon, {}),
                                 onClick: hide,
-                                index: isTurbopack ? 1 : 2
+                                index: isTurbopack ? 2 : 3
                             })
                         })
                     ]
@@ -232,6 +286,20 @@ function DevToolsPopover(param) {
         ]
     });
 }
+function ChevronRight() {
+    return /*#__PURE__*/ _jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        fill: "none",
+        children: /*#__PURE__*/ _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';
@@ -346,22 +414,6 @@ function useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu) {
     ]);
 }
 //////////////////////////////////////////////////////////////////////////////////////
-function ExternalIcon() {
-    return /*#__PURE__*/ _jsx("svg", {
-        width: "16",
-        height: "16",
-        viewBox: "0 0 16 16",
-        fill: "none",
-        role: "img",
-        "aria-label": "External link",
-        children: /*#__PURE__*/ _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"
-        })
-    });
-}
 export const DEV_TOOLS_INDICATOR_STYLES = css(_templateObject());
 
 //# sourceMappingURL=dev-tools-indicator.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport type { OverlayState } from '../../../../../shared'\n\nimport { useState, useEffect, useRef, createContext, useContext } from 'react'\nimport { Toast } from '../../toast'\nimport { Cross, NextLogo } from './internal/next-logo'\nimport { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay'\nimport { useIsDevRendering } from './internal/dev-render-indicator'\nimport { useDelayedRender } from '../../../hooks/use-delayed-render'\nimport { noop as css } from '../../../helpers/noop-template'\n\n// TODO: add E2E tests to cover different scenarios\n\nconst INDICATOR_POSITION =\n  (process.env\n    .__NEXT_DEV_INDICATOR_POSITION as typeof window.__NEXT_DEV_INDICATOR_POSITION) ||\n  'bottom-left'\n\ntype DevToolsIndicatorPosition = typeof INDICATOR_POSITION\n\nexport function DevToolsIndicator({\n  state,\n  errorCount,\n  setIsErrorOverlayOpen,\n  position = INDICATOR_POSITION,\n}: {\n  state: OverlayState\n  errorCount: number\n  setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>\n  // Technically this prop isn't needed, but useful for testing.\n  position?: DevToolsIndicatorPosition\n}) {\n  const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = useState(true)\n\n  return (\n    isDevToolsIndicatorOpen && (\n      <DevToolsPopover\n        semver={state.versionInfo.installed}\n        issueCount={errorCount}\n        isStaticRoute={state.staticIndicator}\n        hide={() => {\n          setIsDevToolsIndicatorOpen(false)\n        }}\n        setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n        isTurbopack={!!process.env.TURBOPACK}\n        position={position}\n      />\n    )\n  )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nconst ANIMATE_OUT_DURATION_MS = 200\nconst ANIMATE_OUT_TIMING_FUNCTION = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)'\n\ninterface C {\n  closeMenu: () => void\n  selectedIndex: number\n  setSelectedIndex: Dispatch<SetStateAction<number>>\n}\n\nconst Context = createContext({} as C)\n\nfunction DevToolsPopover({\n  issueCount,\n  isStaticRoute,\n  isTurbopack,\n  position,\n  hide,\n  setIsErrorOverlayOpen,\n}: {\n  issueCount: number\n  isStaticRoute: boolean\n  semver: string | undefined\n  isTurbopack: boolean\n  position: DevToolsIndicatorPosition\n  hide: () => void\n  setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>\n}) {\n  const menuRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const [isMenuOpen, setIsMenuOpen] = useState(false)\n  const [selectedIndex, setSelectedIndex] = useState(-1)\n\n  // This hook lets us do an exit animation before unmounting the component\n  const { mounted, rendered } = useDelayedRender(isMenuOpen, {\n    // Intentionally no fade in, makes the UI feel more immediate\n    enterDelay: 0,\n    // Graceful fade out to confirm that the UI did not break\n    exitDelay: ANIMATE_OUT_DURATION_MS,\n  })\n\n  // Features to make the menu accessible\n  useFocusTrap(menuRef, triggerRef, isMenuOpen)\n  useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu)\n\n  function select(index: number | 'first' | 'last') {\n    if (index === 'first') {\n      const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n      if (all) {\n        const firstIndex = all[0].getAttribute('data-index')\n        select(Number(firstIndex))\n      }\n      return\n    }\n\n    if (index === 'last') {\n      const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n      if (all) {\n        const lastIndex = all.length - 1\n        select(lastIndex)\n      }\n      return\n    }\n\n    const el = menuRef.current?.querySelector(\n      `[data-index=\"${index}\"]`\n    ) as HTMLElement\n    if (el) {\n      setSelectedIndex(index)\n      el?.focus()\n    }\n  }\n\n  function onMenuKeydown(e: React.KeyboardEvent<HTMLDivElement>) {\n    e.preventDefault()\n\n    switch (e.key) {\n      case 'ArrowDown':\n        const next = selectedIndex + 1\n        select(next)\n        break\n      case 'ArrowUp':\n        const prev = selectedIndex - 1\n        select(prev)\n        break\n      case 'Home':\n        select('first')\n        break\n      case 'End':\n        select('last')\n        break\n      default:\n        break\n    }\n  }\n\n  function onTriggerKeydown(e: React.KeyboardEvent<HTMLButtonElement>) {\n    if (isMenuOpen) {\n      return\n    }\n\n    // Open with first item focused\n    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n      setIsMenuOpen(true)\n      // Run on next tick because querying DOM after state change\n      setTimeout(() => {\n        select('first')\n      })\n    }\n\n    // Open with last item focused\n    if (e.key === 'ArrowUp') {\n      setIsMenuOpen(true)\n      // Run on next tick because querying DOM after state change\n      setTimeout(() => {\n        select('last')\n      })\n    }\n  }\n\n  function openErrorOverlay() {\n    if (issueCount > 0) {\n      setIsErrorOverlayOpen(true)\n    }\n  }\n\n  function onTriggerClick() {\n    setIsMenuOpen((prev) => !prev)\n  }\n\n  function closeMenu() {\n    setIsMenuOpen(false)\n    // Avoid flashing selected state\n    setTimeout(() => {\n      setSelectedIndex(-1)\n    }, ANIMATE_OUT_DURATION_MS)\n  }\n\n  const [vertical, horizontal] = position.split('-', 2)\n\n  return (\n    <Toast\n      data-nextjs-toast\n      style={{\n        boxShadow: 'none',\n        zIndex: 2147483647,\n        // Reset the toast component's default positions.\n        bottom: 'initial',\n        left: 'initial',\n        [vertical]: 'var(--size-2_5)',\n        [horizontal]: 'var(--size-5)',\n      }}\n    >\n      <NextLogo\n        ref={triggerRef}\n        aria-haspopup=\"menu\"\n        aria-expanded={isMenuOpen}\n        aria-controls=\"nextjs-dev-tools-menu\"\n        aria-label={`${isMenuOpen ? 'Close' : 'Open'} Next.js Dev Tools`}\n        data-nextjs-dev-tools-button\n        issueCount={issueCount}\n        onTriggerClick={onTriggerClick}\n        onKeyDown={onTriggerKeydown}\n        openErrorOverlay={openErrorOverlay}\n        isDevBuilding={useIsDevBuilding()}\n        isDevRendering={useIsDevRendering()}\n      />\n\n      {mounted && (\n        <div\n          ref={menuRef}\n          id=\"nextjs-dev-tools-menu\"\n          role=\"menu\"\n          dir=\"ltr\"\n          aria-orientation=\"vertical\"\n          aria-label=\"Next.js Dev Tools Items\"\n          tabIndex={-1}\n          className=\"dev-tools-indicator-menu\"\n          onKeyDown={onMenuKeydown}\n          data-rendered={rendered}\n          style={\n            {\n              '--animate-out-duration-ms': `${ANIMATE_OUT_DURATION_MS}ms`,\n              '--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION,\n              [vertical]: 'calc(100% + var(--size-gap))',\n              [horizontal]: 0,\n            } as React.CSSProperties\n          }\n        >\n          <Context.Provider\n            value={{\n              closeMenu,\n              selectedIndex,\n              setSelectedIndex,\n            }}\n          >\n            <div className=\"dev-tools-indicator-inner\">\n              {issueCount > 0 && (\n                <MenuItem\n                  index={0}\n                  label=\"Issues\"\n                  value={<IssueCount>{issueCount}</IssueCount>}\n                  onClick={openErrorOverlay}\n                />\n              )}\n              <MenuItem\n                label=\"Route\"\n                value={isStaticRoute ? 'Static' : 'Dynamic'}\n                data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}\n              />\n              {isTurbopack ? (\n                <MenuItem label=\"Turbopack\" value=\"Enabled\" />\n              ) : (\n                <MenuItem\n                  index={1}\n                  label=\"Try Turbopack\"\n                  value={<ExternalIcon />}\n                  href=\"https://nextjs.org/docs/app/api-reference/turbopack\"\n                />\n              )}\n            </div>\n\n            <div className=\"dev-tools-indicator-footer\">\n              <MenuItem\n                data-hide-dev-tools\n                label=\"Hide Dev Tools\"\n                value={<Cross color=\"var(--color-gray-900)\" />}\n                onClick={hide}\n                index={isTurbopack ? 1 : 2}\n              />\n            </div>\n          </Context.Provider>\n        </div>\n      )}\n    </Toast>\n  )\n}\n\nfunction MenuItem({\n  index,\n  label,\n  value,\n  onClick,\n  href,\n  ...props\n}: {\n  index?: number\n  label: string\n  value: React.ReactNode\n  href?: string\n  onClick?: () => void\n}) {\n  const isInteractive =\n    typeof onClick === 'function' || typeof href === 'string'\n  const { closeMenu, selectedIndex, setSelectedIndex } = useContext(Context)\n  const selected = selectedIndex === index\n\n  function click() {\n    if (isInteractive) {\n      onClick?.()\n      closeMenu()\n      if (href) {\n        window.open(href, '_blank', 'noopener, noreferrer')\n      }\n    }\n  }\n\n  return (\n    <div\n      className=\"dev-tools-indicator-item\"\n      data-index={index}\n      data-selected={selected}\n      onClick={click}\n      // Needs `onMouseMove` instead of enter to work together\n      // with keyboard and mouse input\n      onMouseMove={() => {\n        if (isInteractive && index !== undefined && selectedIndex !== index) {\n          setSelectedIndex(index)\n        }\n      }}\n      onMouseLeave={() => setSelectedIndex(-1)}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          click()\n        }\n      }}\n      role={isInteractive ? 'menuitem' : undefined}\n      tabIndex={selected ? 0 : -1}\n      {...props}\n    >\n      <span className=\"dev-tools-indicator-label\">{label}</span>\n      <span className=\"dev-tools-indicator-value\">{value}</span>\n    </div>\n  )\n}\n\nfunction IssueCount({ children }: { children: number }) {\n  return (\n    <span\n      className=\"dev-tools-indicator-issue-count\"\n      data-has-issues={children > 0}\n    >\n      <span className=\"dev-tools-indicator-issue-count-indicator\" />\n      {children}\n    </span>\n  )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useFocusTrap(\n  menuRef: React.RefObject<HTMLDivElement | null>,\n  triggerRef: React.RefObject<HTMLButtonElement | null>,\n  isMenuOpen: boolean\n) {\n  useEffect(() => {\n    if (isMenuOpen) {\n      menuRef.current?.focus()\n    } else {\n      const root = triggerRef.current?.getRootNode()\n      const activeElement =\n        root instanceof ShadowRoot ? (root?.activeElement as HTMLElement) : null\n\n      // Only restore focus if the focus was previously on the menu.\n      // This avoids us accidentally focusing on mount when the\n      // user could want to interact with their own app instead.\n      if (menuRef.current?.contains(activeElement)) {\n        triggerRef.current?.focus()\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useClickOutside(\n  menuRef: React.RefObject<HTMLDivElement | null>,\n  triggerRef: React.RefObject<HTMLButtonElement | null>,\n  isMenuOpen: boolean,\n  closeMenu: () => void\n) {\n  useEffect(() => {\n    if (!isMenuOpen) {\n      return\n    }\n\n    // Close menu when clicking outside of it or its button\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        !(menuRef.current?.getBoundingClientRect()\n          ? event.clientX >= menuRef.current.getBoundingClientRect()!.left &&\n            event.clientX <= menuRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= menuRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= menuRef.current.getBoundingClientRect()!.bottom\n          : false) &&\n        !(triggerRef.current?.getBoundingClientRect()\n          ? event.clientX >= triggerRef.current.getBoundingClientRect()!.left &&\n            event.clientX <=\n              triggerRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= triggerRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= triggerRef.current.getBoundingClientRect()!.bottom\n          : false)\n      ) {\n        closeMenu()\n      }\n    }\n\n    // Close popover when pressing escape\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        closeMenu()\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction ExternalIcon() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      role=\"img\"\n      aria-label=\"External link\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        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\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nexport const DEV_TOOLS_INDICATOR_STYLES = css`\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`\n"],"names":["useState","useEffect","useRef","createContext","useContext","Toast","Cross","NextLogo","useIsDevBuilding","useIsDevRendering","useDelayedRender","noop","css","INDICATOR_POSITION","process","env","__NEXT_DEV_INDICATOR_POSITION","DevToolsIndicator","state","errorCount","setIsErrorOverlayOpen","position","isDevToolsIndicatorOpen","setIsDevToolsIndicatorOpen","DevToolsPopover","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","isTurbopack","TURBOPACK","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","Context","menuRef","triggerRef","isMenuOpen","setIsMenuOpen","selectedIndex","setSelectedIndex","mounted","rendered","enterDelay","exitDelay","useFocusTrap","useClickOutside","closeMenu","select","index","all","current","querySelectorAll","firstIndex","getAttribute","Number","lastIndex","length","el","querySelector","focus","onMenuKeydown","e","preventDefault","key","next","prev","onTriggerKeydown","setTimeout","openErrorOverlay","onTriggerClick","vertical","horizontal","split","data-nextjs-toast","style","boxShadow","zIndex","bottom","left","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","onKeyDown","isDevBuilding","isDevRendering","div","id","role","dir","aria-orientation","tabIndex","className","data-rendered","Provider","value","MenuItem","label","IssueCount","onClick","data-nextjs-route-type","ExternalIcon","href","data-hide-dev-tools","color","props","isInteractive","selected","click","window","open","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","root","getRootNode","activeElement","ShadowRoot","contains","handleClickOutside","event","getBoundingClientRect","clientX","right","clientY","top","handleKeyDown","document","addEventListener","removeEventListener","svg","width","height","viewBox","fill","path","fillRule","clipRule","d","DEV_TOOLS_INDICATOR_STYLES"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport type { OverlayState } from '../../../../../shared'\n\nimport { useState, useEffect, useRef, createContext, useContext } from 'react'\nimport { Toast } from '../../toast'\nimport { NextLogo } from './internal/next-logo'\nimport { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay'\nimport { useIsDevRendering } from './internal/dev-render-indicator'\nimport { useDelayedRender } from '../../../hooks/use-delayed-render'\nimport { noop as css } from '../../../helpers/noop-template'\nimport { TurbopackInfo } from './dev-tools-info/turbopack-info'\nimport { RouteInfo } from './dev-tools-info/route-info'\nimport { StopIcon } from '../../../icons/stop-icon'\n\n// TODO: add E2E tests to cover different scenarios\n\nconst INDICATOR_POSITION =\n  (process.env\n    .__NEXT_DEV_INDICATOR_POSITION as typeof window.__NEXT_DEV_INDICATOR_POSITION) ||\n  'bottom-left'\n\ntype DevToolsIndicatorPosition = typeof INDICATOR_POSITION\n\nexport function DevToolsIndicator({\n  state,\n  errorCount,\n  isBuildError,\n  setIsErrorOverlayOpen,\n  position = INDICATOR_POSITION,\n}: {\n  state: OverlayState\n  errorCount: number\n  isBuildError: boolean\n  setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>\n  // Technically this prop isn't needed, but useful for testing.\n  position?: DevToolsIndicatorPosition\n}) {\n  const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = useState(true)\n\n  return (\n    isDevToolsIndicatorOpen && (\n      <DevToolsPopover\n        semver={state.versionInfo.installed}\n        issueCount={errorCount}\n        isStaticRoute={state.staticIndicator}\n        hide={() => {\n          setIsDevToolsIndicatorOpen(false)\n        }}\n        setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n        isTurbopack={!!process.env.TURBOPACK}\n        position={position}\n        disabled={state.disableDevIndicator}\n        isBuildError={isBuildError}\n      />\n    )\n  )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nconst ANIMATE_OUT_DURATION_MS = 200\nconst ANIMATE_OUT_TIMING_FUNCTION = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)'\n\ninterface C {\n  closeMenu: () => void\n  selectedIndex: number\n  setSelectedIndex: Dispatch<SetStateAction<number>>\n}\n\nconst Context = createContext({} as C)\n\nfunction DevToolsPopover({\n  disabled,\n  issueCount,\n  isStaticRoute,\n  isTurbopack,\n  position,\n  isBuildError,\n  hide,\n  setIsErrorOverlayOpen,\n}: {\n  disabled: boolean\n  issueCount: number\n  isStaticRoute: boolean\n  semver: string | undefined\n  isTurbopack: boolean\n  position: DevToolsIndicatorPosition\n  isBuildError: boolean\n  hide: () => void\n  setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>\n}) {\n  const menuRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const turbopackRef = useRef<HTMLElement>(null)\n  const triggerTurbopackRef = useRef<HTMLButtonElement | null>(null)\n  const routeInfoRef = useRef<HTMLElement>(null)\n  const triggerRouteInfoRef = useRef<HTMLButtonElement | null>(null)\n  const [isMenuOpen, setIsMenuOpen] = useState(false)\n  const [isTurbopackInfoOpen, setIsTurbopackInfoOpen] = useState(false)\n  const [isRouteInfoOpen, setIsRouteInfoOpen] = useState(false)\n  const [selectedIndex, setSelectedIndex] = useState(-1)\n\n  // This hook lets us do an exit animation before unmounting the component\n  const { mounted: menuMounted, rendered: menuRendered } = useDelayedRender(\n    isMenuOpen,\n    {\n      // Intentionally no fade in, makes the UI feel more immediate\n      enterDelay: 0,\n      // Graceful fade out to confirm that the UI did not break\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    }\n  )\n  const { mounted: turbopackInfoMounted, rendered: turbopackInfoRendered } =\n    useDelayedRender(isTurbopackInfoOpen, {\n      enterDelay: 0,\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    })\n  const { mounted: routeInfoMounted, rendered: routeInfoRendered } =\n    useDelayedRender(isRouteInfoOpen, {\n      enterDelay: 0,\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    })\n\n  // Features to make the menu accessible\n  useFocusTrap(menuRef, triggerRef, isMenuOpen)\n  useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu)\n  useFocusTrap(turbopackRef, triggerTurbopackRef, isTurbopackInfoOpen)\n  useClickOutside(\n    turbopackRef,\n    triggerTurbopackRef,\n    isTurbopackInfoOpen,\n    closeTurbopackInfo\n  )\n  useFocusTrap(routeInfoRef, triggerRouteInfoRef, isRouteInfoOpen)\n  useClickOutside(\n    routeInfoRef,\n    triggerRouteInfoRef,\n    isRouteInfoOpen,\n    closeRouteInfo\n  )\n\n  function select(index: number | 'first' | 'last') {\n    if (index === 'first') {\n      const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n      if (all) {\n        const firstIndex = all[0].getAttribute('data-index')\n        select(Number(firstIndex))\n      }\n      return\n    }\n\n    if (index === 'last') {\n      const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n      if (all) {\n        const lastIndex = all.length - 1\n        select(lastIndex)\n      }\n      return\n    }\n\n    const el = menuRef.current?.querySelector(\n      `[data-index=\"${index}\"]`\n    ) as HTMLElement\n    if (el) {\n      setSelectedIndex(index)\n      el?.focus()\n    }\n  }\n\n  function onMenuKeydown(e: React.KeyboardEvent<HTMLDivElement>) {\n    e.preventDefault()\n\n    switch (e.key) {\n      case 'ArrowDown':\n        const next = selectedIndex + 1\n        select(next)\n        break\n      case 'ArrowUp':\n        const prev = selectedIndex - 1\n        select(prev)\n        break\n      case 'Home':\n        select('first')\n        break\n      case 'End':\n        select('last')\n        break\n      default:\n        break\n    }\n  }\n\n  function onTriggerKeydown(e: React.KeyboardEvent<HTMLButtonElement>) {\n    if (isMenuOpen) {\n      return\n    }\n\n    // Open with first item focused\n    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n      setIsMenuOpen(true)\n      // Run on next tick because querying DOM after state change\n      setTimeout(() => {\n        select('first')\n      })\n    }\n\n    // Open with last item focused\n    if (e.key === 'ArrowUp') {\n      setIsMenuOpen(true)\n      // Run on next tick because querying DOM after state change\n      setTimeout(() => {\n        select('last')\n      })\n    }\n  }\n\n  function openErrorOverlay() {\n    if (issueCount > 0) {\n      setIsErrorOverlayOpen(true)\n    }\n  }\n\n  function onTriggerClick() {\n    setIsMenuOpen((prev) => !prev)\n  }\n\n  function closeMenu() {\n    setIsMenuOpen(false)\n    // Avoid flashing selected state\n    setTimeout(() => {\n      setSelectedIndex(-1)\n    }, ANIMATE_OUT_DURATION_MS)\n  }\n\n  function closeTurbopackInfo() {\n    setIsTurbopackInfoOpen(false)\n  }\n\n  function closeRouteInfo() {\n    setIsRouteInfoOpen(false)\n  }\n\n  const [vertical, horizontal] = position.split('-', 2)\n\n  return (\n    <Toast\n      data-nextjs-toast\n      style={{\n        boxShadow: 'none',\n        zIndex: 2147483647,\n        // Reset the toast component's default positions.\n        bottom: 'initial',\n        left: 'initial',\n        [vertical]: 'var(--size-2_5)',\n        [horizontal]: 'var(--size-5)',\n      }}\n    >\n      <NextLogo\n        ref={triggerRef}\n        aria-haspopup=\"menu\"\n        aria-expanded={isMenuOpen}\n        aria-controls=\"nextjs-dev-tools-menu\"\n        aria-label={`${isMenuOpen ? 'Close' : 'Open'} Next.js Dev Tools`}\n        data-nextjs-dev-tools-button\n        disabled={disabled}\n        issueCount={issueCount}\n        onTriggerClick={onTriggerClick}\n        onKeyDown={onTriggerKeydown}\n        openErrorOverlay={openErrorOverlay}\n        isDevBuilding={useIsDevBuilding()}\n        isDevRendering={useIsDevRendering()}\n        isBuildError={isBuildError}\n      />\n\n      {routeInfoMounted && (\n        <RouteInfo\n          ref={routeInfoRef}\n          routeType={isStaticRoute ? 'Static' : 'Dynamic'}\n          isOpen={isRouteInfoOpen}\n          setIsOpen={setIsRouteInfoOpen}\n          setPreviousOpen={setIsMenuOpen}\n          style={{\n            [vertical]: 'calc(100% + var(--size-gap))',\n            [horizontal]: 0,\n          }}\n          data-rendered={routeInfoRendered}\n        />\n      )}\n\n      {turbopackInfoMounted && (\n        <TurbopackInfo\n          ref={turbopackRef}\n          isOpen={isTurbopackInfoOpen}\n          setIsOpen={setIsTurbopackInfoOpen}\n          setPreviousOpen={setIsMenuOpen}\n          style={{\n            [vertical]: 'calc(100% + var(--size-gap))',\n            [horizontal]: 0,\n          }}\n          data-rendered={turbopackInfoRendered}\n        />\n      )}\n\n      {menuMounted && (\n        <div\n          ref={menuRef}\n          id=\"nextjs-dev-tools-menu\"\n          role=\"menu\"\n          dir=\"ltr\"\n          aria-orientation=\"vertical\"\n          aria-label=\"Next.js Dev Tools Items\"\n          tabIndex={-1}\n          className=\"dev-tools-indicator-menu\"\n          onKeyDown={onMenuKeydown}\n          data-rendered={menuRendered}\n          style={\n            {\n              '--animate-out-duration-ms': `${ANIMATE_OUT_DURATION_MS}ms`,\n              '--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION,\n              [vertical]: 'calc(100% + var(--size-gap))',\n              [horizontal]: 0,\n            } as React.CSSProperties\n          }\n        >\n          <Context.Provider\n            value={{\n              closeMenu,\n              selectedIndex,\n              setSelectedIndex,\n            }}\n          >\n            <div className=\"dev-tools-indicator-inner\">\n              {issueCount > 0 && (\n                <MenuItem\n                  index={0}\n                  label=\"Issues\"\n                  value={<IssueCount>{issueCount}</IssueCount>}\n                  onClick={openErrorOverlay}\n                />\n              )}\n              <MenuItem\n                label=\"Route\"\n                index={1}\n                value={isStaticRoute ? 'Static' : 'Dynamic'}\n                onClick={() => setIsRouteInfoOpen(true)}\n                data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}\n              />\n              {isTurbopack ? (\n                <MenuItem label=\"Turbopack\" value=\"Enabled\" />\n              ) : (\n                <MenuItem\n                  index={2}\n                  label=\"Try Turbopack\"\n                  value={<ChevronRight />}\n                  onClick={() => setIsTurbopackInfoOpen(true)}\n                />\n              )}\n            </div>\n\n            <div className=\"dev-tools-indicator-footer\">\n              <MenuItem\n                data-hide-dev-tools\n                label=\"Hide Dev Tools\"\n                value={<StopIcon />}\n                onClick={hide}\n                index={isTurbopack ? 2 : 3}\n              />\n            </div>\n          </Context.Provider>\n        </div>\n      )}\n    </Toast>\n  )\n}\n\nfunction ChevronRight() {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n      <path\n        fill=\"#666\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        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\"\n      />\n    </svg>\n  )\n}\n\nfunction MenuItem({\n  index,\n  label,\n  value,\n  onClick,\n  href,\n  ...props\n}: {\n  index?: number\n  label: string\n  value: React.ReactNode\n  href?: string\n  onClick?: () => void\n}) {\n  const isInteractive =\n    typeof onClick === 'function' || typeof href === 'string'\n  const { closeMenu, selectedIndex, setSelectedIndex } = useContext(Context)\n  const selected = selectedIndex === index\n\n  function click() {\n    if (isInteractive) {\n      onClick?.()\n      closeMenu()\n      if (href) {\n        window.open(href, '_blank', 'noopener, noreferrer')\n      }\n    }\n  }\n\n  return (\n    <div\n      className=\"dev-tools-indicator-item\"\n      data-index={index}\n      data-selected={selected}\n      onClick={click}\n      // Needs `onMouseMove` instead of enter to work together\n      // with keyboard and mouse input\n      onMouseMove={() => {\n        if (isInteractive && index !== undefined && selectedIndex !== index) {\n          setSelectedIndex(index)\n        }\n      }}\n      onMouseLeave={() => setSelectedIndex(-1)}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          click()\n        }\n      }}\n      role={isInteractive ? 'menuitem' : undefined}\n      tabIndex={selected ? 0 : -1}\n      {...props}\n    >\n      <span className=\"dev-tools-indicator-label\">{label}</span>\n      <span className=\"dev-tools-indicator-value\">{value}</span>\n    </div>\n  )\n}\n\nfunction IssueCount({ children }: { children: number }) {\n  return (\n    <span\n      className=\"dev-tools-indicator-issue-count\"\n      data-has-issues={children > 0}\n    >\n      <span className=\"dev-tools-indicator-issue-count-indicator\" />\n      {children}\n    </span>\n  )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useFocusTrap(\n  menuRef: React.RefObject<HTMLElement | null>,\n  triggerRef: React.RefObject<HTMLButtonElement | null>,\n  isMenuOpen: boolean\n) {\n  useEffect(() => {\n    if (isMenuOpen) {\n      menuRef.current?.focus()\n    } else {\n      const root = triggerRef.current?.getRootNode()\n      const activeElement =\n        root instanceof ShadowRoot ? (root?.activeElement as HTMLElement) : null\n\n      // Only restore focus if the focus was previously on the menu.\n      // This avoids us accidentally focusing on mount when the\n      // user could want to interact with their own app instead.\n      if (menuRef.current?.contains(activeElement)) {\n        triggerRef.current?.focus()\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useClickOutside(\n  menuRef: React.RefObject<HTMLElement | null>,\n  triggerRef: React.RefObject<HTMLButtonElement | null>,\n  isMenuOpen: boolean,\n  closeMenu: () => void\n) {\n  useEffect(() => {\n    if (!isMenuOpen) {\n      return\n    }\n\n    // Close menu when clicking outside of it or its button\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        !(menuRef.current?.getBoundingClientRect()\n          ? event.clientX >= menuRef.current.getBoundingClientRect()!.left &&\n            event.clientX <= menuRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= menuRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= menuRef.current.getBoundingClientRect()!.bottom\n          : false) &&\n        !(triggerRef.current?.getBoundingClientRect()\n          ? event.clientX >= triggerRef.current.getBoundingClientRect()!.left &&\n            event.clientX <=\n              triggerRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= triggerRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= triggerRef.current.getBoundingClientRect()!.bottom\n          : false)\n      ) {\n        closeMenu()\n      }\n    }\n\n    // Close popover when pressing escape\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        closeMenu()\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nexport const DEV_TOOLS_INDICATOR_STYLES = css`\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`\n"],"names":["useState","useEffect","useRef","createContext","useContext","Toast","NextLogo","useIsDevBuilding","useIsDevRendering","useDelayedRender","noop","css","TurbopackInfo","RouteInfo","StopIcon","INDICATOR_POSITION","process","env","__NEXT_DEV_INDICATOR_POSITION","DevToolsIndicator","state","errorCount","isBuildError","setIsErrorOverlayOpen","position","isDevToolsIndicatorOpen","setIsDevToolsIndicatorOpen","DevToolsPopover","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","isTurbopack","TURBOPACK","disabled","disableDevIndicator","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","Context","menuRef","triggerRef","turbopackRef","triggerTurbopackRef","routeInfoRef","triggerRouteInfoRef","isMenuOpen","setIsMenuOpen","isTurbopackInfoOpen","setIsTurbopackInfoOpen","isRouteInfoOpen","setIsRouteInfoOpen","selectedIndex","setSelectedIndex","mounted","menuMounted","rendered","menuRendered","enterDelay","exitDelay","turbopackInfoMounted","turbopackInfoRendered","routeInfoMounted","routeInfoRendered","useFocusTrap","useClickOutside","closeMenu","closeTurbopackInfo","closeRouteInfo","select","index","all","current","querySelectorAll","firstIndex","getAttribute","Number","lastIndex","length","el","querySelector","focus","onMenuKeydown","e","preventDefault","key","next","prev","onTriggerKeydown","setTimeout","openErrorOverlay","onTriggerClick","vertical","horizontal","split","data-nextjs-toast","style","boxShadow","zIndex","bottom","left","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","onKeyDown","isDevBuilding","isDevRendering","routeType","isOpen","setIsOpen","setPreviousOpen","data-rendered","div","id","role","dir","aria-orientation","tabIndex","className","Provider","value","MenuItem","label","IssueCount","onClick","data-nextjs-route-type","ChevronRight","data-hide-dev-tools","svg","xmlns","width","height","fill","path","fillRule","clipRule","d","href","props","isInteractive","selected","click","window","open","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","root","getRootNode","activeElement","ShadowRoot","contains","handleClickOutside","event","getBoundingClientRect","clientX","right","clientY","top","handleKeyDown","document","addEventListener","removeEventListener","DEV_TOOLS_INDICATOR_STYLES"],"mappings":"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"}

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

@@ -51,21 +51,32 @@ const state = {
     refreshState: {
         type: 'idle'
     },
+    disableDevIndicator: false,
     rootLayoutMissingTags: [],
     versionInfo: mockVersionInfo,
     notFound: false,
-    staticIndicator: false,
+    staticIndicator: true,
     debugInfo: {
         devtoolsFrontendUrl: undefined
     }
 };
-export const NoErrors = {
+export const StaticRoute = {
     args: {
         errorCount: 0,
         state,
         setIsErrorOverlayOpen: ()=>{}
     }
 };
+export const DynamicRoute = {
+    args: {
+        errorCount: 0,
+        state: {
+            ...state,
+            staticIndicator: false
+        },
+        setIsErrorOverlayOpen: ()=>{}
+    }
+};
 export const SingleError = {
     args: {
         errorCount: 1,
@@ -80,17 +91,5 @@ export const MultipleErrors = {
         setIsErrorOverlayOpen: ()=>{}
     }
 };
-export const WithStaticIndicator = {
-    args: {
-        errorCount: 3,
-        state: {
-            ...state,
-            staticIndicator: true
-        },
-        setIsErrorOverlayOpen: ()=>{
-            console.log('setIsErrorOverlayOpen called');
-        }
-    }
-};
 
 //# sourceMappingURL=dev-tools-indicator.stories.js.map