@@ -2,11 +2,7 @@ import './segment-boundary-trigger.css'
2
2
import { useCallback , useState , useRef , useMemo } from 'react'
3
3
import { Menu } from '@base-ui-components/react/menu'
4
4
import type { SegmentNodeState } from '../../../userspace/app/segment-explorer-node'
5
- import {
6
- isBoundaryFile ,
7
- normalizeBoundaryFilename ,
8
- } from '../../../../server/app-render/segment-explorer-path'
9
- import { cx } from '../../utils/cx'
5
+ import { normalizeBoundaryFilename } from '../../../../server/app-render/segment-explorer-path'
10
6
import { useClickOutside } from '../errors/dev-tools-indicator/utils'
11
7
12
8
const composeRefs = ( ...refs : ( React . Ref < HTMLButtonElement > | undefined ) [ ] ) => {
@@ -29,13 +25,7 @@ export function SegmentBoundaryTrigger({
29
25
boundaries : Record < 'not-found' | 'loading' | 'error' , string | null >
30
26
} ) {
31
27
const currNode = nodeState
32
- const {
33
- pagePath,
34
- boundaryType,
35
- type,
36
- setBoundaryType : onSelectBoundary ,
37
- } = currNode
38
- const fileType = type
28
+ const { pagePath, boundaryType, setBoundaryType : onSelectBoundary } = currNode
39
29
40
30
const [ isOpen , setIsOpen ] = useState ( false )
41
31
// TODO: move this shadowRoot ref util to a shared hook or into context
@@ -76,15 +66,12 @@ export function SegmentBoundaryTrigger({
76
66
} , [ boundaries , possibleExtension ] )
77
67
78
68
const fileName = ( pagePath || '' ) . split ( '/' ) . pop ( ) || ''
79
- const isBoundary = isBoundaryFile ( fileType )
80
69
const pageFileName = normalizeBoundaryFilename (
81
70
boundaryType
82
71
? `page.${ possibleExtension } `
83
72
: fileName || `page.${ possibleExtension } `
84
73
)
85
74
86
- const isPageOrBoundary = fileType && ! isBoundary
87
-
88
75
const triggerOptions = [
89
76
{
90
77
label : fileNames . loading ,
@@ -158,15 +145,21 @@ export function SegmentBoundaryTrigger({
158
145
return < Trigger { ...triggerProps } ref = { mergedRef } />
159
146
}
160
147
148
+ const hasBoundary = useMemo ( ( ) => {
149
+ const hasPageOrBoundary =
150
+ nodeState . type !== 'layout' && nodeState . type !== 'template'
151
+ return (
152
+ hasPageOrBoundary && Object . values ( boundaries ) . some ( ( v ) => v !== null )
153
+ )
154
+ } , [ nodeState . type , boundaries ] )
155
+
161
156
return (
162
157
< Menu . Root delay = { 0 } modal = { false } open = { isOpen } onOpenChange = { setIsOpen } >
163
158
< Menu . Trigger
164
- className = { cx (
165
- 'segment-boundary-trigger' ,
166
- ! isPageOrBoundary && 'segment-boundary-trigger--boundary'
167
- ) }
159
+ className = "segment-boundary-trigger"
168
160
data-nextjs-dev-overlay-segment-boundary-trigger-button
169
161
render = { MergedRefTrigger }
162
+ disabled = { ! hasBoundary }
170
163
/>
171
164
172
165
{ /* @ts -expect-error remove this expect-error once shadowRoot is supported as container */ }
@@ -330,13 +323,9 @@ function SwitchIcon(props: React.SVGProps<SVGSVGElement>) {
330
323
)
331
324
}
332
325
333
- export function Trigger ( props : React . ComponentProps < 'button' > ) {
326
+ function Trigger ( props : React . ComponentProps < 'button' > ) {
334
327
return (
335
- < button
336
- { ...props }
337
- className = { cx ( 'segment-boundary-trigger' , props . className ) }
338
- role = "button"
339
- >
328
+ < button { ...props } >
340
329
< span className = "segment-boundary-trigger-text" >
341
330
< SwitchIcon className = "plus-icon" />
342
331
</ span >
0 commit comments