diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index fac0c9bdb2b1..cc4481a56d1c 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -22,6 +22,7 @@ import { DocsPageWrapper } from '../lib/blocks/src/components'; import { isChromatic } from './isChromatic'; const { document } = global; +globalThis.CONFIG_TYPE = 'DEVELOPMENT'; const ThemeBlock = styled.div<{ side: 'left' | 'right'; layout: string }>( { diff --git a/code/core/src/manager/components/sidebar/ContextMenu.tsx b/code/core/src/manager/components/sidebar/ContextMenu.tsx index 867ed8da72b7..6e0300a22eb0 100644 --- a/code/core/src/manager/components/sidebar/ContextMenu.tsx +++ b/code/core/src/manager/components/sidebar/ContextMenu.tsx @@ -12,7 +12,11 @@ import type { API } from '@storybook/core/manager-api'; import type { Link } from '../../../components/components/tooltip/TooltipLinkList'; import { StatusButton } from './StatusButton'; import type { ExcludesNull } from './Tree'; -import { ContextMenu } from './Tree'; + +const empty = { + onMouseEnter: () => {}, + node: null, +}; export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) => { const [hoverCount, setHoverCount] = useState(0); @@ -34,7 +38,7 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) }, []); /** - * Calculate the providerLinks whenever the user mouses over the container. We use an incrementer, + * Calculate the providerLinks whenever the user mouses over the container. We use an incrementor, * instead of a simple boolean to ensure that the links are recalculated */ const providerLinks = useMemo(() => { @@ -51,6 +55,11 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) const isRendered = providerLinks.length > 0 || links.length > 0; return useMemo(() => { + // Never show the SidebarContextMenu in production + if (globalThis.CONFIG_TYPE !== 'DEVELOPMENT') { + return empty; + } + return { onMouseEnter: handlers.onMouseEnter, node: isRendered ? (