@sanity/ui 4.0.0-static.33 → 4.0.0-static.35

package/src/core/primitives/textInput/TextInput.tsx

@@ -23,8 +23,8 @@ import {
 import {isValidElementType} from 'react-is'
 
 import {EMPTY_RECORD} from '../../constants'
+import {_getResponsiveProp} from '../../helpers/props'
 import {useCustomValidity} from '../../hooks/useCustomValidity'
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {isRecord} from '../../lib/isRecord'
 import type {ComponentType, Props} from '../../types'
 import {Box} from '../box/Box'
@@ -107,7 +107,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
 
   const ref = useRef<HTMLInputElement | null>(null)
 
-  const responsivePadding = useResponsiveProp(padding)
+  const responsivePadding = useMemo(() => _getResponsiveProp(padding), [padding])
 
   const withClearButton = Boolean(clearButton)
 
@@ -137,35 +137,6 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     [onClear, ref],
   )
 
-  const clearButtonBoxPadding = useMemo(() => {
-    return Object.fromEntries(
-      Object.entries(responsivePadding).map(([key, value]) => {
-        if (value === 0) return [key, 0]
-        if (value === 1) return [key, 1]
-        if (value === 2) return [key, 1]
-
-        return [key, typeof value === 'number' ? value - 2 : 0]
-      }),
-    ) as ResponsiveProp<Space>
-  }, [responsivePadding])
-
-  const clearButtonPadding = useMemo(() => {
-    return Object.fromEntries(
-      Object.entries(responsivePadding).map(([key, value]) => {
-        if (value === 0) return [key, 0]
-        if (value === 1) return [key, 0]
-        if (value === 2) return [key, 1]
-
-        return [key, typeof value === 'number' ? value - 1 : 0]
-      }),
-    ) as ResponsiveProp<Space>
-  }, [responsivePadding])
-
-  const clearButtonProps: TextInputClearButtonProps = useMemo(
-    () => (isRecord(clearButton) ? clearButton : EMPTY_RECORD),
-    [clearButton],
-  )
-
   return (
     <span
       className={textInput({
@@ -224,28 +195,14 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
         </span>
 
         {!disabled && !readOnly && clearButton && (
-          <Box
-            as="span"
-            insetTop={0}
-            insetRight={0}
-            padding={clearButtonBoxPadding}
-            position="absolute"
-            style={{zIndex: 2}}
-          >
-            <Button
-              aria-label="Clear"
-              data-qa="clear-button"
-              display="block"
-              fontSize={fontSize}
-              icon={CloseIcon}
-              mode="bleed"
-              padding={clearButtonPadding}
-              radius={radius}
-              {...clearButtonProps}
-              onClick={handleClearClick}
-              onMouseDown={handleClearMouseDown}
-            />
-          </Box>
+          <ClearButton
+            fontSize={fontSize}
+            radius={radius}
+            clearButtonProps={isRecord(clearButton) ? clearButton : EMPTY_RECORD}
+            handleClearClick={handleClearClick}
+            handleClearMouseDown={handleClearMouseDown}
+            padding={responsivePadding}
+          />
         )}
       </span>
 
@@ -257,3 +214,66 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     </span>
   )
 }
+
+function ClearButton({
+  fontSize,
+  radius,
+  clearButtonProps,
+  handleClearClick,
+  handleClearMouseDown,
+  padding,
+}: {
+  clearButtonProps: TextInputClearButtonProps
+  handleClearClick: (event: MouseEvent<HTMLButtonElement>) => void
+  handleClearMouseDown: (event: MouseEvent<HTMLButtonElement>) => void
+  padding: ResponsiveProp<Space>
+} & Pick<TextInputOwnProps, 'fontSize' | 'radius'>) {
+  const clearButtonBoxPadding = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(padding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 1]
+        if (value === 2) return [key, 1]
+
+        return [key, typeof value === 'number' ? value - 2 : 0]
+      }),
+    ) as ResponsiveProp<Space>
+  }, [padding])
+
+  const clearButtonPadding = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(padding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 0]
+        if (value === 2) return [key, 1]
+
+        return [key, typeof value === 'number' ? value - 1 : 0]
+      }),
+    ) as ResponsiveProp<Space>
+  }, [padding])
+
+  return (
+    <Box
+      as="span"
+      insetTop={0}
+      insetRight={0}
+      padding={clearButtonBoxPadding}
+      position="absolute"
+      style={{zIndex: 2}}
+    >
+      <Button
+        aria-label="Clear"
+        data-qa="clear-button"
+        display="block"
+        fontSize={fontSize}
+        icon={CloseIcon}
+        mode="bleed"
+        padding={clearButtonPadding}
+        radius={radius}
+        {...clearButtonProps}
+        onClick={handleClearClick}
+        onMouseDown={handleClearMouseDown}
+      />
+    </Box>
+  )
+}

package/src/core/primitives/tooltip/Tooltip.tsx

@@ -19,6 +19,7 @@ import {
   type ReactElement,
   type ReactNode,
   type RefAttributes,
+  use,
   useCallback,
   useEffect,
   useId,
@@ -35,20 +36,21 @@ import {useDelayedState} from '../../hooks/useDelayedState'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {origin} from '../../middleware/origin'
 import type {ComponentType, Delay, Placement, Props} from '../../types'
-import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
+import {BoundaryElementContext} from '../../utils/boundaryElement/BoundaryElementContext'
 import {getElementRef} from '../../utils/getElementRef'
 import {Portal} from '../../utils/portal/Portal'
-import {usePortal} from '../../utils/portal/usePortal'
+import {PortalContext} from '../../utils/portal/PortalContext'
+import {assertPortalContext} from '../../utils/portal/usePortal'
+import {CardContext} from '../card/CardContext'
 import {CardProvider} from '../card/CardProvider'
-import {useCard} from '../card/useCard'
+import {assertCardContext} from '../card/useCard'
 import type {LayerOwnProps} from '../layer/Layer'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_TOOLTIP_DISTANCE,
   DEFAULT_TOOLTIP_PADDING,
 } from './constants'
-import {useTooltipDelayGroup} from './tooltipDelayGroup/useTooltipDelayGroup'
-// import {useTooltipDelayGroup} from './TooltipDelayGroup'
+import {TooltipDelayGroupContext} from './tooltipDelayGroup/TooltipDelayGroupContext'
 import {TooltipLayer} from './TooltipLayer'
 
 /** @public */
@@ -106,8 +108,6 @@ export type TooltipProps<E extends TooltipElementType = TooltipElementType> = Pr
 export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
   props: TooltipProps<E>,
 ): React.JSX.Element {
-  const boundaryElementContext = useBoundaryElement()
-
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
@@ -130,11 +130,10 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     tone = 'inherit',
     ...rest
   } = props as TooltipProps<typeof DEFAULT_TOOLTIP_ELEMENT>
-  const boundaryElement = _boundaryElement ?? boundaryElementContext?.element
+  const boundaryElement = _boundaryElement ?? use(BoundaryElementContext)
   const fallbackPlacements =
     _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
 
-  const card = useCard()
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const ref = useRef<HTMLDivElement | null>(null)
@@ -145,9 +144,13 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
 
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
 
-  const portal = usePortal()
-  const portalElement =
-    typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
+  let portalElement: HTMLElement | null = null
+  if (portalProp) {
+    const portal = use(PortalContext)
+    assertPortalContext(portal)
+    portalElement =
+      typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
+  }
 
   const middleware = useMiddleware({
     animate,
@@ -174,7 +177,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
 
   const tooltipId = useId()
   const [isOpen, setIsOpen] = useDelayedState(false)
-  const delayGroupContext = useTooltipDelayGroup()
+  const delayGroupContext = use(TooltipDelayGroupContext)
   const {setIsGroupActive, setOpenTooltipId} = delayGroupContext || {}
   const showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId
 
@@ -385,17 +388,24 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     </TooltipLayer>
   )
 
-  const children =
-    showTooltip &&
-    (portalProp ? (
+  let children = showTooltip ? node : null
+
+  if (showTooltip && portalProp) {
+    let resolvedTone = tone as Exclude<typeof tone, 'inherit'>
+    if (tone === 'inherit') {
+      const card = use(CardContext)
+      assertCardContext(card)
+      resolvedTone = card.tone
+    }
+
+    children = (
       <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-        <CardProvider tone={tone === 'inherit' ? card.tone : tone} scheme={scheme ?? 'light'}>
+        <CardProvider tone={resolvedTone} scheme={scheme ?? 'light'}>
           {node}
         </CardProvider>
       </Portal>
-    ) : (
-      node
-    ))
+    )
+  }
 
   return (
     <>

package/src/core/primitives/tooltip/tooltipDelayGroup/TooltipDelayGroupProvider.tsx

@@ -49,7 +49,5 @@ export function TooltipDelayGroupProvider(
     [closeDelay, isGroupActive, openDelay, openTooltipId, setIsGroupActive, setOpenTooltipId],
   )
 
-  return (
-    <TooltipDelayGroupContext.Provider value={value}>{children}</TooltipDelayGroupContext.Provider>
-  )
+  return <TooltipDelayGroupContext value={value}>{children}</TooltipDelayGroupContext>
 }

package/src/core/utils/boundaryElement/BoundaryElementContext.ts

@@ -3,8 +3,5 @@ import type {Context} from 'react'
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import type {BoundaryElementContextValue} from './types'
 
-export const BoundaryElementContext: Context<BoundaryElementContextValue | null> =
-  createGlobalScopedContext<BoundaryElementContextValue | null>(
-    '@sanity/ui/v4/boundaryElement',
-    null,
-  )
+export const BoundaryElementContext: Context<BoundaryElementContextValue> =
+  createGlobalScopedContext<BoundaryElementContextValue>('@sanity/ui/v4/boundaryElement', null)

package/src/core/utils/boundaryElement/BoundaryElementProvider.tsx

@@ -1,7 +1,6 @@
-import {type ReactNode, useMemo} from 'react'
+import {type ReactNode} from 'react'
 
 import {BoundaryElementContext} from './BoundaryElementContext'
-import type {BoundaryElementContextValue} from './types'
 
 /** @public */
 export interface BoundaryElementProviderProps {
@@ -12,7 +11,6 @@ export interface BoundaryElementProviderProps {
 /** @public */
 export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
   const {children, element} = props
-  const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
 
-  return <BoundaryElementContext.Provider value={value}>{children}</BoundaryElementContext.Provider>
+  return <BoundaryElementContext value={element}>{children}</BoundaryElementContext>
 }

package/src/core/utils/boundaryElement/types.ts

@@ -1,5 +1,2 @@
 /** @public */
-export interface BoundaryElementContextValue {
-  version: 0.0
-  element: HTMLElement | null
-}
+export type BoundaryElementContextValue = HTMLElement | null

package/src/core/utils/boundaryElement/useBoundaryElement.ts

@@ -1,24 +1,12 @@
-import {use} from 'react'
+import {use, useMemo} from 'react'
 
-import {isRecord} from '../../lib/isRecord'
 import {BoundaryElementContext} from './BoundaryElementContext'
 import type {BoundaryElementContextValue} from './types'
 
-const DEFAULT_VALUE: BoundaryElementContextValue = {
-  version: 0.0,
-  element: null,
-}
-
 /** @public */
-export function useBoundaryElement(): BoundaryElementContextValue {
-  const value = use(BoundaryElementContext)
-
-  // NOTE: This check is for future-compatiblity
-  // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (value && (!isRecord(value) || value.version !== 0.0)) {
-    throw new Error('useBoundaryElement(): the context value is not compatible')
-  }
-
-  return value || DEFAULT_VALUE
+export function useBoundaryElement(): {version: 0.0; element: BoundaryElementContextValue} {
+  // eslint-disable-next-line no-warning-comments
+  // @TODO this wrapping is for BC and should be removed
+  const element = use(BoundaryElementContext)
+  return useMemo(() => ({version: 0.0, element}), [element])
 }

package/src/core/utils/portal/Portal.tsx

@@ -1,8 +1,9 @@
-import type {ReactNode, ReactPortal} from 'react'
+import {type ReactNode, type ReactPortal, use} from 'react'
 import {createPortal} from 'react-dom'
 
+import {CardContext} from '../../primitives/card/CardContext'
 import {CardProvider} from '../../primitives/card/CardProvider'
-import {useCard} from '../../primitives/card/useCard'
+import {assertCardContext} from '../../primitives/card/useCard'
 import {usePortal} from './usePortal'
 
 /** @public */
@@ -17,7 +18,6 @@ export interface PortalProps {
 /** @public */
 export function Portal(props: PortalProps): ReactPortal | null {
   const {children, __unstable_name: name} = props
-  const card = useCard()
   const portal = usePortal()
   const portalElement =
     (name ? portal.elements && portal.elements[name] : portal.element) ||
@@ -27,6 +27,9 @@ export function Portal(props: PortalProps): ReactPortal | null {
     return null
   }
 
+  const card = use(CardContext)
+  assertCardContext(card)
+
   return createPortal(
     <CardProvider tone="transparent" scheme={card.scheme}>
       {children}

package/src/core/utils/portal/usePortal.ts

@@ -8,6 +8,15 @@ import type {PortalContextValue} from './types'
 export function usePortal(): PortalContextValue {
   const value = use(PortalContext)
 
+  assertPortalContext(value)
+
+  return value
+}
+
+/** @internal */
+export function assertPortalContext(
+  value: PortalContextValue | null,
+): asserts value is PortalContextValue {
   if (!value) {
     throw new Error('usePortal(): missing context value')
   }
@@ -18,6 +27,4 @@ export function usePortal(): PortalContextValue {
   if (!isRecord(value) || value.version !== 0.0) {
     throw new Error('usePortal(): the context value is not compatible')
   }
-
-  return value
 }

package/src/core/utils/boundaryElement/BoundaryElement.test.tsx

@@ -1,102 +0,0 @@
-import {describe, expect, it, vi} from 'vitest'
-
-import {render} from '$test/utils'
-
-import {BoundaryElementContext} from './BoundaryElementContext'
-import type {BoundaryElementContextValue} from './types'
-import {useBoundaryElement} from './useBoundaryElement'
-
-describe('utils/boundaryElement', () => {
-  describe('useBoundaryElement', () => {
-    it('should get context value', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootBoundaryElement = useBoundaryElement()
-
-        log(rootBoundaryElement)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: BoundaryElementContextValue = {
-          version: 0.0,
-          element: null,
-        }
-
-        return (
-          <BoundaryElementContext.Provider value={value}>
-            <Debug />
-          </BoundaryElementContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].element).toBe(null)
-    })
-
-    it('should provide default value when no context value is provided', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootBoundaryElement = useBoundaryElement()
-
-        log(rootBoundaryElement)
-
-        return null
-      }
-
-      function Root() {
-        return (
-          <BoundaryElementContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={undefined}
-          >
-            <Debug />
-          </BoundaryElementContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].element).toBe(null)
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          useBoundaryElement()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // NOTE: we’re testing this because the context value may be a function in the future
-
-        return (
-          <BoundaryElementContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={() => ({version: 1})}
-          >
-            <Debug />
-          </BoundaryElementContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useBoundaryElement(): the context value is not compatible',
-      )
-    })
-  })
-})