@sanity/ui 3.0.0-static.5 → 3.0.0-static.7

package/src/ui/primitives/popover/popover.tsx

@@ -26,13 +26,8 @@ import {
   useRef,
 } from 'react'
 
-// import {useTheme_v2} from '../../_compat'
-import {
-  useArrayProp,
-  // useElementSize,
-  // useMediaIndex,
-  usePrefersReducedMotion,
-} from '../../hooks'
+import {Z_OFFSETS} from '../../constants'
+import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {origin} from '../../middleware/origin'
 import {Placement, PopoverMargins, Props} from '../../types'
 import {LayerProps, LayerProvider, Portal, useBoundaryElement, useLayer} from '../../utils'
@@ -44,7 +39,6 @@ import {
   DEFAULT_POPOVER_PADDING,
 } from './constants'
 import {size} from './floating-ui/size'
-// import {calcCurrentWidth, calcMaxWidth} from './helpers'
 import {PopoverCard} from './popoverCard'
 import {PopoverUpdateCallback} from './types'
 
@@ -67,7 +61,7 @@ export interface PopoverProps extends CardProps, LayerProps {
    * When `true`, prevent overflow within the current boundary:
    * - by flipping on its side axis
    * - by resizing
-  /*
+   *
    * Note that:
    * - setting `preventOverflow` to `true` also prevents overflow on its side axis
    * - setting `matchReferenceWidth` to `true` also causes the popover to resize
@@ -128,13 +122,13 @@ export const Popover = memo(
     props: Props<PopoverProps, 'div'>,
     forwardedRef: ForwardedRef<HTMLDivElement>,
   ): ReactElement {
-    // const {container, layer} = useTheme_v2()
     const boundaryElementContext = useBoundaryElement()
 
     const {
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = false,
       arrow: arrowProp = false,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       boundaryElement = boundaryElementContext.element,
       children: childProp,
       constrainSize = false,
@@ -161,17 +155,12 @@ export const Popover = memo(
       tone = 'inherit',
       width: widthProp = 'auto',
       // zOffset: zOffsetProp = layer.popover.zOffset,
-      zOffset: zOffsetProp,
+      zOffset: zOffsetProp = Z_OFFSETS.popover,
       updateRef,
       ...restProps
     } = props
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
-    // const boundarySize = useElementSize(boundaryElement)?.border
-    // const padding = useArrayProp(paddingProp)
-    // const radius = useArrayProp(radiusProp)
-    // const shadow = useArrayProp(shadowProp)
-    // const widthArrayProp = useArrayProp(widthProp)
     const zOffset = useArrayProp(zOffsetProp)
     const ref = useRef<HTMLDivElement | null>(null)
     const arrowRef = useRef<HTMLDivElement | null>(null)
@@ -182,57 +171,9 @@ export const Popover = memo(
       () => ref.current,
     )
 
-    // const mediaIndex = useMediaIndex()
-    // const boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : undefined
-
-    // Update width when
-    // - media index changes
-    // - `width` property changes
-    // const width = calcCurrentWidth({
-    //   container,
-    //   mediaIndex,
-    //   width: widthArrayProp,
-    // })
-    // const widthRef = useRef(width)
-
-    // useEffect(() => {
-    //   widthRef.current = width
-    // }, [width])
-
-    // Update max width when
-    // - boundary width changes
-    // - `width` property changes
-    // const maxWidth = calcMaxWidth({boundaryWidth, currentWidth: width})
-    // const maxWidthRef = useRef(maxWidth)
-
-    // useEffect(() => {
-    //   maxWidthRef.current = maxWidth
-    // }, [maxWidth])
-
     // Keep track of reference element width (see `size` middleware below)
     const referenceWidthRef = useRef<number>(undefined)
 
-    // // Force apply width & max width to floating element
-    // useEffect(() => {
-    //   const floatingElement = ref.current
-
-    //   if (!open || !floatingElement) return
-
-    //   const referenceWidth = referenceWidthRef.current
-
-    //   if (matchReferenceWidth) {
-    //     if (referenceWidth !== undefined) {
-    //       floatingElement.style.width = `${referenceWidth}px`
-    //     }
-    //   } else if (width !== undefined) {
-    //     floatingElement.style.width = `${width}px`
-    //   }
-
-    //   if (typeof maxWidth === 'number') {
-    //     floatingElement.style.maxWidth = `${maxWidth}px`
-    //   }
-    // }, [width, matchReferenceWidth, maxWidth, open])
-
     const middleware = useMemo(() => {
       const ret: Middleware[] = []
 
@@ -260,22 +201,11 @@ export const Popover = memo(
 
               referenceWidthRef.current = referenceWidth
 
-              // const _currentWidth = widthRef.current
-              // const _maxWidth = maxWidthRef.current
-
               if (matchReferenceWidth) {
                 elements.floating.style.width = `${referenceWidth}px`
               }
-              // else if (_currentWidth !== undefined) {
-              //   elements.floating.style.width = `${_currentWidth}px`
-              // }
 
               if (constrainSize) {
-                // elements.floating.style.maxWidth = `${Math.min(
-                //   availableWidth,
-                //   _maxWidth ?? Infinity,
-                // )}px`
-
                 elements.floating.style.maxWidth = `${availableWidth}px`
                 elements.floating.style.maxHeight = `${availableHeight}px`
               }

package/src/ui/primitives/popover/popoverCard.tsx

@@ -1,11 +1,12 @@
 import {Strategy} from '@floating-ui/react-dom'
+import {popoverCard} from '@sanity/ui/css'
 import {motion, MotionProps} from 'framer-motion'
 import {CSSProperties, ForwardedRef, forwardRef, memo, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
 import {Placement, PopoverMargins, Props} from '../../types'
 import {Arrow, useLayer} from '../../utils'
-import {Card, CardProps} from '../card'
+import {Card, CardProps, CardProvider, useCard} from '../card'
 import {Flex} from '../flex'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
@@ -69,6 +70,8 @@ export const PopoverCard = memo(
       ...restProps
     } = props
 
+    const card = useCard()
+
     const layer = useLayer()
 
     // Get margins: [top, right, bottom, left]
@@ -107,48 +110,51 @@ export const PopoverCard = memo(
     )
 
     return (
-      <MotionCard
-        className="popover-card"
-        data-ui="Popover"
-        {...(restProps as CardProps & MotionProps)}
-        data-placement={placement}
-        direction="column"
-        display="flex"
-        radius={radius}
-        ref={ref}
-        scheme={scheme}
-        shadow={shadow}
-        sizing="border"
-        style={rootStyle}
-        tone={tone}
-        variants={POPOVER_MOTION_PROPS.card}
-        transition={POPOVER_MOTION_PROPS.transition}
-        initial={animate ? ['hidden', 'initial'] : undefined}
-        animate={animate ? ['visible', 'scaleIn'] : undefined}
-        exit={animate ? ['hidden', 'scaleOut'] : undefined}
-      >
-        <Flex
-          data-ui="Popover__wrapper"
+      <CardProvider tone={card?.tone ?? 'transparent'} scheme={card?.scheme ?? 'light'}>
+        <MotionCard
+          className={popoverCard()}
+          data-ui="Popover"
+          {...(restProps as CardProps & MotionProps)}
+          data-context-tone={card?.tone ?? 'transparent'}
+          data-placement={placement}
           direction="column"
-          flex={1}
-          maxWidth={maxWidth}
-          overflow={overflow}
+          display="flex"
+          radius={radius}
+          ref={ref}
+          scheme={scheme}
+          shadow={shadow}
+          sizing="border"
+          style={rootStyle}
+          tone={tone}
+          variants={POPOVER_MOTION_PROPS.card}
+          transition={POPOVER_MOTION_PROPS.transition}
+          initial={animate ? ['hidden', 'initial'] : undefined}
+          animate={animate ? ['visible', 'scaleIn'] : undefined}
+          exit={animate ? ['hidden', 'scaleOut'] : undefined}
         >
-          <Flex direction="column" flex={1} padding={padding}>
-            {children}
+          <Flex
+            data-ui="Popover__wrapper"
+            direction="column"
+            flex={1}
+            maxWidth={maxWidth}
+            overflow={overflow}
+          >
+            <Flex direction="column" flex={1} padding={padding}>
+              {children}
+            </Flex>
           </Flex>
-        </Flex>
 
-        {arrow && (
-          <Arrow
-            ref={arrowRef}
-            style={arrowStyle}
-            width={DEFAULT_POPOVER_ARROW_WIDTH}
-            height={DEFAULT_POPOVER_ARROW_HEIGHT}
-            radius={DEFAULT_POPOVER_ARROW_RADIUS}
-          />
-        )}
-      </MotionCard>
+          {arrow && (
+            <Arrow
+              ref={arrowRef}
+              style={arrowStyle}
+              width={DEFAULT_POPOVER_ARROW_WIDTH}
+              height={DEFAULT_POPOVER_ARROW_HEIGHT}
+              radius={DEFAULT_POPOVER_ARROW_RADIUS}
+            />
+          )}
+        </MotionCard>
+      </CardProvider>
     )
   }),
 )

package/src/ui/primitives/textInput/textInput.tsx

@@ -106,7 +106,7 @@ export const TextInput = forwardRef(function TextInput(
     className,
     clearButton,
     disabled = false,
-    fontSize = 1,
+    fontSize = 2,
     gap,
     icon: IconComponent,
     iconRight: IconRightComponent,

package/src/ui/primitives/tooltip/tooltip.tsx

@@ -28,7 +28,7 @@ import {
 } from 'react'
 import {useEffectEvent} from 'use-effect-event'
 
-import {useTheme_v2} from '../../_compat'
+import {Z_OFFSETS} from '../../constants'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
@@ -91,7 +91,6 @@ export const Tooltip = forwardRef(function Tooltip(
   forwardedRef: ForwardedRef<HTMLDivElement>,
 ) {
   const boundaryElementContext = useBoundaryElement()
-  const {layer} = useTheme_v2()
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
@@ -109,7 +108,7 @@ export const Tooltip = forwardRef(function Tooltip(
     radius = 3,
     scheme,
     shadow = 2,
-    zOffset = layer.tooltip.zOffset,
+    zOffset = Z_OFFSETS.tooltip,
     tone,
     ...restProps
   } = props