@sanity/ui 3.0.0-static.10 → 3.0.0-static.11

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

@@ -31,7 +31,7 @@ import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {origin} from '../../middleware/origin'
 import {Placement, PopoverMargins, Props} from '../../types'
 import {LayerProps, LayerProvider, Portal, useBoundaryElement, useLayer} from '../../utils'
-import {CardProps} from '../card'
+import {CardProps, CardProvider, useCard} from '../card'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_POPOVER_DISTANCE,
@@ -109,7 +109,17 @@ export interface PopoverProps extends CardProps, LayerProps {
 const ViewportOverlay = () => {
   const {zIndex} = useLayer()
 
-  return <div style={{height: '100vh', inset: 0, position: 'fixed', width: '100vw', zIndex}} />
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex,
+      }}
+    />
+  )
 }
 
 /**
@@ -154,11 +164,13 @@ export const Popover = memo(
       shadow = 3,
       tone = 'inherit',
       width: widthProp = 'auto',
-      // zOffset: zOffsetProp = layer.popover.zOffset,
       zOffset: zOffsetProp = Z_OFFSETS.popover,
       updateRef,
       ...restProps
     } = props
+
+    const card = useCard()
+
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
     const zOffset = useArrayProp(zOffsetProp)
@@ -338,7 +350,8 @@ export const Popover = memo(
 
     const popover = (
       <LayerProvider zOffset={zOffset}>
-        {/* Optional transparent blocking overlay at the top-most z-index layer. Must be positioned before the below popover card. */}
+        {/* Optional transparent blocking overlay at the top-most z-index layer. Must be positioned 
+        before the below popover card. */}
         {modal && <ViewportOverlay />}
 
         <PopoverCard
@@ -356,13 +369,11 @@ export const Popover = memo(
           placement={placement}
           radius={radius}
           ref={setFloating}
-          // referenceWidth={matchReferenceWidth ? referenceWidthRef.current : width}
           scheme={scheme}
           shadow={shadow}
           originX={originX}
           originY={originY}
           strategy={strategy}
-          tone={tone}
           x={x}
           y={y}
         >
@@ -374,7 +385,14 @@ export const Popover = memo(
     const children =
       open &&
       (portal ? (
-        <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>{popover}</Portal>
+        <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
+          <CardProvider
+            tone={tone === 'inherit' ? (card?.tone ?? 'default') : tone}
+            scheme={scheme ?? 'light'}
+          >
+            {popover}
+          </CardProvider>
+        </Portal>
       ) : (
         popover
       ))

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

@@ -6,7 +6,7 @@ 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, CardProvider, useCard} from '../card'
+import {Card, CardProps} from '../card'
 import {Flex} from '../flex'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
@@ -59,18 +59,21 @@ export const PopoverCard = memo(
       overflow,
       radius,
       referenceWidth,
-      scheme,
+      // scheme: schemeProp,
       shadow,
       strategy,
       style,
-      tone,
+      tone = 'inherit',
       // width,
       x: xProp,
       y: yProp,
       ...restProps
     } = props
 
-    const card = useCard()
+    // const card = useCard()
+
+    // const tone = toneProp ?? card?.tone ?? 'inherit'
+    // const scheme = schemeProp ?? card?.scheme ?? 'light'
 
     const layer = useLayer()
 
@@ -110,51 +113,49 @@ export const PopoverCard = memo(
     )
 
     return (
-      <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}
+      <MotionCard
+        className={popoverCard()}
+        data-ui="Popover"
+        {...(restProps as CardProps & MotionProps)}
+        data-context-tone={tone}
+        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"
           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={1}
+          maxWidth={maxWidth}
+          overflow={overflow}
         >
-          <Flex
-            data-ui="Popover__wrapper"
-            direction="column"
-            flex={1}
-            maxWidth={maxWidth}
-            overflow={overflow}
-          >
-            <Flex direction="column" flex={1} padding={padding}>
-              {children}
-            </Flex>
+          <Flex direction="column" flex={1} padding={padding}>
+            {children}
           </Flex>
+        </Flex>
 
-          {arrow && (
-            <Arrow
-              ref={arrowRef}
-              style={arrowStyle}
-              width={DEFAULT_POPOVER_ARROW_WIDTH}
-              height={DEFAULT_POPOVER_ARROW_HEIGHT}
-              radius={DEFAULT_POPOVER_ARROW_RADIUS}
-            />
-          )}
-        </MotionCard>
-      </CardProvider>
+        {arrow && (
+          <Arrow
+            ref={arrowRef}
+            style={arrowStyle}
+            width={DEFAULT_POPOVER_ARROW_WIDTH}
+            height={DEFAULT_POPOVER_ARROW_HEIGHT}
+            radius={DEFAULT_POPOVER_ARROW_RADIUS}
+          />
+        )}
+      </MotionCard>
     )
   }),
 )

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

@@ -35,6 +35,7 @@ import {origin} from '../../middleware/origin'
 import type {Placement, Props} from '../../types'
 import {Layer, type LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
 import {getElementRef} from '../../utils/getElementRef'
+import {CardProvider, useCard} from '../card'
 import type {Delay} from '../types'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
@@ -109,9 +110,10 @@ export const Tooltip = forwardRef(function Tooltip(
     scheme,
     shadow = 2,
     zOffset = Z_OFFSETS.tooltip,
-    tone,
+    tone = 'inherit',
     ...restProps
   } = props
+  const card = useCard()
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
@@ -399,7 +401,12 @@ export const Tooltip = forwardRef(function Tooltip(
     showTooltip &&
     (portalProp ? (
       <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-        {node}
+        <CardProvider
+          tone={tone === 'inherit' ? (card?.tone ?? 'default') : tone}
+          scheme={scheme ?? 'light'}
+        >
+          {node}
+        </CardProvider>
       </Portal>
     ) : (
       node

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

@@ -52,7 +52,7 @@ export const TooltipCard = memo(
       scheme,
       shadow,
       style,
-      tone,
+      tone = 'inherit',
       ...restProps
     } = props
 

package/src/ui/utils/arrow/arrow.tsx

@@ -1,7 +1,6 @@
-import {_arrow, _arrowShape, _arrowStroke} from '@sanity/ui/css'
+import {_arrow, _arrowShape, _arrowStroke, _arrowStrokeMask} from '@sanity/ui/css'
 import {CSSProperties, ForwardedRef, forwardRef, ReactElement, useMemo} from 'react'
 
-import {useTheme_v2} from '../../_compat'
 import {Props} from '../../types'
 import {compileCommands, getRoundedCommands, Point} from './cmds'
 
@@ -11,8 +10,6 @@ export const Arrow = forwardRef(function Arrow(
   ref: ForwardedRef<HTMLDivElement>,
 ): ReactElement {
   const {width: w, height: h, radius = 0, style, ...restProps} = props
-  const {card} = useTheme_v2()
-  const strokeWidth = card.shadow.outline
 
   const center = w / 2
 
@@ -42,14 +39,9 @@ export const Arrow = forwardRef(function Arrow(
     >
       <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
         <mask id="stroke-mask">
-          <rect x={0} y={strokeWidth} width={w} height={w} fill="white" />
+          <rect className={_arrowStrokeMask()} x={0} width={w} height={w} fill="white" />
         </mask>
-        <path
-          className={_arrowStroke()}
-          d={strokePath}
-          mask="url(#stroke-mask)"
-          strokeWidth={strokeWidth * 2}
-        />
+        <path className={_arrowStroke()} d={strokePath} mask="url(#stroke-mask)" />
         <path className={_arrowShape()} d={fillPath} />
       </svg>
     </div>

package/src/ui/utils/elementQuery/elementQuery.tsx

@@ -1,6 +1,6 @@
+import {BREAKPOINTS} from '@sanity/ui/css'
 import {ForwardedRef, forwardRef, useImperativeHandle, useMemo, useState} from 'react'
 
-import {useTheme_v2} from '../../_compat'
 import {useElementSize} from '../../hooks'
 import {Props} from '../../types'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
@@ -13,6 +13,8 @@ export interface MediaQueryProps {
   media?: number[]
 }
 
+const defaultBreakpoints = Object.values(BREAKPOINTS)
+
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
@@ -21,24 +23,24 @@ export const ElementQuery = forwardRef(function ElementQuery(
   props: Props<MediaQueryProps, 'div'>,
   forwardedRef: ForwardedRef<HTMLDivElement>,
 ) {
-  const theme = useTheme_v2()
-  const {children, media: _media, ...restProps} = props
-  const media = _media ?? theme.media
+  const {children, media: mediaProp, ...restProps} = props
+  const breakpoints = mediaProp ?? defaultBreakpoints
 
   const [element, setElement] = useState<HTMLDivElement | null>(null)
   const elementSize = useElementSize(element)
   const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
 
   const max = useMemo(() => {
-    const eq = findMaxBreakpoints(media, width)
+    const eq = findMaxBreakpoints(breakpoints, width)
 
     return eq.length ? eq.join(' ') : undefined
-  }, [media, width])
+  }, [breakpoints, width])
+
   const min = useMemo(() => {
-    const eq = findMinBreakpoints(media, width)
+    const eq = findMinBreakpoints(breakpoints, width)
 
     return eq.length ? eq.join(' ') : undefined
-  }, [media, width])
+  }, [breakpoints, width])
 
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => element, [
     element,

package/src/ui/utils/virtualList/virtualList.tsx

@@ -1,4 +1,7 @@
+import {vars} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {
+  CSSProperties,
   ForwardedRef,
   forwardRef,
   ReactElement,
@@ -10,7 +13,6 @@ import {
   useState,
 } from 'react'
 
-import {useTheme_v2} from '../../_compat'
 import {_isScrollable} from '../../helpers'
 import {_ResizeObserver} from '../../observers'
 import {Box, StackProps} from '../../primitives'
@@ -32,7 +34,7 @@ export interface VirtualListChangeOpts {
  * @beta
  */
 export interface VirtualListProps<Item = any> extends Omit<StackProps, 'gap'> {
-  gap?: number
+  gap?: Space
   getItemKey?: (item: Item, itemIndex: number) => string
   items?: Item[]
   onChange?: (opts: VirtualListChangeOpts) => void
@@ -46,27 +48,18 @@ export const VirtualList = forwardRef(function VirtualList(
   props: Props<VirtualListProps, 'div'>,
   forwardedRef: ForwardedRef<HTMLDivElement>,
 ): ReactElement {
-  const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
-  const {space} = useTheme_v2()
+  const {gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
   const ref = useRef<HTMLDivElement | null>(null)
   const wrapperRef = useRef<HTMLDivElement | null>(null)
   const [scrollTop, setScrollTop] = useState(0)
   const [scrollHeight, setScrollHeight] = useState(0)
   const [itemHeight, setItemHeight] = useState(-1)
 
+  const [gapValue, setGapValue] = useState(0)
+
   // Sync ref to parent
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
 
-  useEffect(() => {
-    if (!wrapperRef.current) return
-
-    const firstElement = wrapperRef.current.firstChild
-
-    if (firstElement instanceof HTMLElement) {
-      setItemHeight(firstElement.offsetHeight)
-    }
-  }, [renderItem])
-
   useEffect((): (() => void) | undefined => {
     if (!ref.current) return
 
@@ -119,23 +112,42 @@ export const VirtualList = forwardRef(function VirtualList(
   }, [])
 
   const len = items.length
-  const height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0
+  const height = itemHeight ? len * (itemHeight + gapValue) - gapValue : 0
   const fromIndex = height ? Math.max(Math.floor((scrollTop / height) * len) - 2, 0) : 0
   const toIndex = height ? Math.ceil(((scrollTop + scrollHeight) / height) * len) + 1 : 0
 
   useEffect(() => {
-    if (!onChange) return
-    onChange({fromIndex, gap: space[gap], itemHeight, scrollHeight, scrollTop, toIndex})
-  }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex])
+    onChange?.({
+      fromIndex,
+      gap: gapValue,
+      itemHeight,
+      scrollHeight,
+      scrollTop,
+      toIndex,
+    })
+  }, [fromIndex, gapValue, itemHeight, onChange, scrollHeight, scrollTop, toIndex])
 
   const children = useMemo(() => {
     if (!renderItem || items.length === 0) return null
 
     if (itemHeight === -1) {
       return [
-        <Box insetTop={0} insetLeft={0} insetRight={0} key={0} position="absolute">
-          {renderItem(items[0])}
-        </Box>,
+        <>
+          <Box
+            ref={(el) => (el ? setItemHeight(el.offsetHeight) : undefined)}
+            insetTop={0}
+            insetLeft={0}
+            insetRight={0}
+            key={0}
+            position="absolute"
+          >
+            {renderItem(items[0])}
+          </Box>
+          <div
+            ref={(el) => (el ? setGapValue(el.offsetHeight) : undefined)}
+            style={{height: vars.space[gap]}}
+          />
+        </>,
       ]
     }
 
@@ -150,25 +162,18 @@ export const VirtualList = forwardRef(function VirtualList(
           insetRight={0}
           key={key}
           position="absolute"
-          style={{top: itemIndex * (itemHeight + space[gap])}}
+          style={{top: itemIndex * (itemHeight + gapValue) - gapValue}}
         >
           {node}
         </Box>
       )
     })
-  }, [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex])
+  }, [fromIndex, gap, gapValue, getItemKey, itemHeight, items, renderItem, toIndex])
 
-  const wrapperStyle = useMemo(() => ({height}), [height])
+  const wrapperStyle: CSSProperties = useMemo(() => ({height}), [height])
 
   return (
-    <Box
-      // Root
-      as={as}
-      data-ui="VirtualList"
-      {...restProps}
-      position="relative"
-      ref={ref}
-    >
+    <Box data-ui="VirtualList" {...restProps} position="relative" ref={ref}>
       <div ref={wrapperRef} style={wrapperStyle}>
         {children}
       </div>

package/src/css/components/breadcrumbs/rules.ts

@@ -1,25 +0,0 @@
-import {Rules} from '../../types'
-
-export const breadcrumbsRules: Rules = {
-  breadcrumbs: {
-    lineHeight: 0,
-  },
-}
-
-// import {styled} from '../../lib/styled'
-// import {Button} from '../../primitives'
-
-// export const Root = styled.ol`
-//   margin: 0;
-//   padding: 0;
-//   display: flex;
-//   list-style: none;
-//   align-items: center;
-//   white-space: nowrap;
-//   line-height: 0;
-// `
-
-// export const ExpandButton = styled(Button)`
-//   appearance: none;
-//   margin: -4px;
-// `

package/src/css/components/dialog/rules.ts

@@ -1,78 +0,0 @@
-import {Rules} from '../../types'
-import {vars} from '../../vars'
-
-export const dialogRules: Rules = {
-  'dialog': {
-    'top': 0,
-    'left': 0,
-    'right': 0,
-    'bottom': 0,
-    'alignItems': 'center',
-    'justifyContent': 'center',
-    'outline': 'none',
-
-    'background': vars.color.backdrop,
-
-    // @ts-expect-error - TODO: fix this
-    '@keyframes': {
-      'dialog-zoom-in': {
-        from: {
-          opacity: 0,
-          transform: 'scale(0.95)',
-        },
-        to: {
-          opacity: 1,
-          transform: 'scale(1)',
-        },
-      },
-      'dialog-fade-in': {
-        from: {
-          opacity: 0,
-        },
-        to: {
-          opacity: 1,
-        },
-      },
-    },
-
-    '@nest': {
-      '&[data-animate]': {
-        animation: 'dialog-fade-in 200ms ease-out',
-      },
-
-      // Animates the dialog card.
-      '&[data-animate] > [data-ui="DialogCard"]': {
-        animation: 'dialog-zoom-in 200ms ease-out',
-      },
-    },
-  },
-
-  'dialog-container': {
-    width: '100%',
-    height: '100%',
-  },
-
-  'dialog-card-root': {
-    width: '100%',
-    maxHeight: '100%',
-    // @ts-expect-error - TODO: fix this
-    overflow: ['hidden', 'clip'],
-  },
-
-  'dialog-layout': {
-    width: '100%',
-  },
-
-  'dialog-header': {
-    zIndex: 2,
-  },
-
-  'dialog-content': {
-    zIndex: 1,
-    outline: 'none',
-  },
-
-  'dialog-footer': {
-    zIndex: 3,
-  },
-}

package/src/css/components/skeleton/rules.ts

@@ -1,113 +0,0 @@
-import {FONT_CODE_SIZE, FONT_HEADING_SIZE, FONT_LABEL_SIZE, FONT_TEXT_SIZE} from '@sanity/ui/theme'
-
-import {responsiveRules} from '../../responsiveRules'
-import {Rules} from '../../types'
-import {vars} from '../../vars'
-
-export const skeletonRules: Rules = {
-  'skeleton': {
-    '--color-skeleton-from': `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
-    '--color-skeleton-to': `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
-
-    'backgroundColor': vars.color.skeleton.from,
-    'backgroundPosition': '100%',
-    'backgroundSize': '200% 100%',
-    'backgroundAttachment': 'fixed',
-    'opacity': 0,
-    'transition': 'opacity 200ms ease-in',
-
-    // @ts-expect-error - TODO: fix this
-    '@keyframes': {
-      'skeleton-pulse': {
-        '0%': {
-          backgroundPosition: '100%',
-        },
-        '100%': {
-          backgroundPosition: '-100%',
-        },
-      },
-    },
-
-    '@nest': {
-      '&[data-animated]': {
-        backgroundImage: [
-          `linear-gradient(to right`,
-          vars.color.skeleton.from,
-          vars.color.skeleton.to,
-          vars.color.skeleton.from,
-          vars.color.skeleton.from,
-          vars.color.skeleton.from,
-          `)`,
-        ].join(', '),
-        animationName: 'skeleton-pulse',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite',
-        animationDuration: '2000ms',
-      },
-
-      '&[data-visible]': {
-        opacity: 1,
-      },
-    },
-
-    '@media': {
-      'screen and (prefers-reduced-motion: no-preference)': {
-        backgroundColor: vars.color.skeleton.from,
-      },
-    },
-  },
-
-  'font-skeleton': {
-    height: `calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))`,
-  },
-
-  // ...responsiveRules('text-skeleton-0', {
-  //   '--font-skeleton-line-height': 'var(--font-text-0-line-height)',
-  //   '--font-skeleton-ascender-height': 'var(--font-text-0-ascender-height)',
-  //   '--font-skeleton-descender-height': 'var(--font-text-0-descender-height)',
-  // }),
-
-  ...FONT_CODE_SIZE.reduce((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`code-skeleton-${size}`, {
-        '--font-skeleton-line-height': vars.font.code.sizes[size].lineHeight,
-        '--font-skeleton-ascender-height': vars.font.code.sizes[size].ascenderHeight,
-        '--font-skeleton-descender-height': vars.font.code.sizes[size].descenderHeight,
-      }),
-    }
-  }, {}),
-
-  ...FONT_HEADING_SIZE.reduce((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`heading-skeleton-${size}`, {
-        '--font-skeleton-line-height': vars.font.heading.sizes[size].lineHeight,
-        '--font-skeleton-ascender-height': vars.font.heading.sizes[size].ascenderHeight,
-        '--font-skeleton-descender-height': vars.font.heading.sizes[size].descenderHeight,
-      }),
-    }
-  }, {}),
-
-  ...FONT_LABEL_SIZE.reduce((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`label-skeleton-${size}`, {
-        '--font-skeleton-line-height': vars.font.label.sizes[size].lineHeight,
-        '--font-skeleton-ascender-height': vars.font.label.sizes[size].ascenderHeight,
-        '--font-skeleton-descender-height': vars.font.label.sizes[size].descenderHeight,
-      }),
-    }
-  }, {}),
-
-  ...FONT_TEXT_SIZE.reduce((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`text-skeleton-${size}`, {
-        '--font-skeleton-line-height': vars.font.text.sizes[size].lineHeight,
-        '--font-skeleton-ascender-height': vars.font.text.sizes[size].ascenderHeight,
-        '--font-skeleton-descender-height': vars.font.text.sizes[size].descenderHeight,
-      }),
-    }
-  }, {}),
-}