feat(sanity): add isInteractive prop to ConnectorContext (#7907)

Author: juice49

packages/sanity/src/_singletons/context/ConnectorContext.ts

@@ -9,5 +9,6 @@ export const ConnectorContext = createContext<ConnectorContextValue>(
     isReviewChangesOpen: false,
     onOpenReviewChanges: () => undefined,
     onSetFocus: () => undefined,
+    isInteractive: true,
   } as ConnectorContextValue,
 )

packages/sanity/src/core/changeIndicators/ChangeIndicator.tsx

@@ -7,10 +7,12 @@ import {
   memo,
   type MouseEvent,
   useCallback,
+  useContext,
   useMemo,
   useState,
 } from 'react'
 import deepCompare from 'react-fast-compare'
+import {ConnectorContext} from 'sanity/_singletons'
 
 import {EMPTY_ARRAY} from '../util'
 import {ElementWithChangeBar} from './ElementWithChangeBar'
@@ -23,6 +25,7 @@ const ChangeBarWrapper = memo(function ChangeBarWrapper(
     hasFocus: boolean
     isChanged?: boolean
     withHoverEffect?: boolean
+    isInteractive?: boolean
   },
 ) {
   const {
@@ -34,6 +37,7 @@ const ChangeBarWrapper = memo(function ChangeBarWrapper(
     onMouseLeave: onMouseLeaveProp,
     path = EMPTY_ARRAY,
     withHoverEffect,
+    isInteractive,
     ...restProps
   } = props
   const layer = useLayer()
@@ -82,6 +86,7 @@ const ChangeBarWrapper = memo(function ChangeBarWrapper(
         isChanged={isChanged}
         disabled={disabled}
         withHoverEffect={withHoverEffect}
+        isInteractive={isInteractive}
       >
         {children}
       </ElementWithChangeBar>
@@ -102,6 +107,7 @@ export function ChangeIndicator(
   props: ChangeIndicatorProps & Omit<HTMLProps<HTMLDivElement>, 'as'>,
 ) {
   const {children, hasFocus, isChanged, path, withHoverEffect, ...restProps} = props
+  const {isInteractive} = useContext(ConnectorContext)
 
   return (
     <ChangeBarWrapper
@@ -110,6 +116,7 @@ export function ChangeIndicator(
       hasFocus={hasFocus}
       isChanged={isChanged}
       withHoverEffect={withHoverEffect}
+      isInteractive={isInteractive}
     >
       {children}
     </ChangeBarWrapper>

packages/sanity/src/core/changeIndicators/ConnectorContext.ts

@@ -5,4 +5,5 @@ export interface ConnectorContextValue {
   isReviewChangesOpen: boolean
   onOpenReviewChanges: () => void | undefined
   onSetFocus: (nextPath: Path) => void | undefined
+  isInteractive?: boolean
 }

packages/sanity/src/core/changeIndicators/ElementWithChangeBar.styled.tsx

@@ -110,8 +110,11 @@ export const ChangeBarMarker = styled.div((props) => {
   `
 })
 
-export const ChangeBarButton = styled.button<{$withHoverEffect?: boolean}>((props) => {
-  const {$withHoverEffect} = props
+export const ChangeBarButton = styled.button<{
+  $withHoverEffect?: boolean
+  $isInteractive?: boolean
+}>((props) => {
+  const {$withHoverEffect, $isInteractive} = props
 
   return css`
     appearance: none;
@@ -123,8 +126,13 @@ export const ChangeBarButton = styled.button<{$withHoverEffect?: boolean}>((prop
     opacity: 0;
     position: absolute;
     height: 100%;
-    cursor: pointer;
-    pointer-events: all;
+
+    ${$isInteractive &&
+    css`
+      cursor: pointer;
+      pointer-events: all;
+    `}
+
     left: calc(-0.25rem + var(--change-bar-offset));
     width: calc(1rem - 1px);
     transition: opacity ${animationSpeed}ms;

packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx

@@ -18,8 +18,16 @@ export function ElementWithChangeBar(props: {
   hasFocus?: boolean
   isChanged?: boolean
   withHoverEffect?: boolean
+  isInteractive?: boolean
 }) {
-  const {children, disabled, hasFocus, isChanged, withHoverEffect = true} = props
+  const {
+    children,
+    disabled,
+    hasFocus,
+    isChanged,
+    withHoverEffect = true,
+    isInteractive = true,
+  } = props
 
   const {onOpenReviewChanges, isReviewChangesOpen} = useContext(ConnectorContext)
   const {zIndex} = useLayer()
@@ -30,19 +38,29 @@ export function ElementWithChangeBar(props: {
       disabled || !isChanged ? null : (
         <ChangeBar data-testid="change-bar" $zIndex={zIndex}>
           <ChangeBarMarker data-testid="change-bar__marker" />
-          <Tooltip content={t('changes.change-bar.aria-label')} portal>
+          <Tooltip content={t('changes.change-bar.aria-label')} portal disabled={!isInteractive}>
             <ChangeBarButton
               aria-label={t('changes.change-bar.aria-label')}
               data-testid="change-bar__button"
               onClick={isReviewChangesOpen ? undefined : onOpenReviewChanges}
               tabIndex={-1}
               type="button"
               $withHoverEffect={withHoverEffect}
+              $isInteractive={isInteractive}
             />
           </Tooltip>
         </ChangeBar>
       ),
-    [disabled, isChanged, isReviewChangesOpen, onOpenReviewChanges, t, withHoverEffect, zIndex],
+    [
+      disabled,
+      isChanged,
+      isInteractive,
+      isReviewChangesOpen,
+      onOpenReviewChanges,
+      t,
+      withHoverEffect,
+      zIndex,
+    ],
   )
 
   return (