@sanity/ui 3.0.0-static.13 → 3.0.0-static.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.13",
+  "version": "3.0.0-static.15",
   "keywords": [
     "react",
     "ui",

package/src/css/aspects/margin/margin.style.ts

@@ -1,6 +1,3 @@
-// import {type Style, type StyleRules, vars} from '@sanity/css'
-// import {SPACE} from '@sanity/theme'
-
 import {SPACE} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'

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

@@ -27,7 +27,7 @@ import {Z_OFFSETS} from '../../constants'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {origin} from '../../middleware/origin'
 import type {ComponentType, Placement, PopoverMargins, Props} from '../../types'
-import {type LayerOwnProps, LayerProvider, Portal, useBoundaryElement, useLayer} from '../../utils'
+import {type LayerOwnProps, Portal, useBoundaryElement, useLayer} from '../../utils'
 import {CardProvider, useCard} from '../card'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
@@ -36,7 +36,7 @@ import {
   DEFAULT_POPOVER_PADDING,
 } from './constants'
 import {size} from './floating-ui/size'
-import {PopoverCard} from './popoverCard'
+import {PopoverLayer} from './popoverLayer'
 import type {PopoverUpdateCallback} from './types'
 
 /** @public */
@@ -353,12 +353,12 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
   }
 
   const popover = (
-    <LayerProvider zOffset={zOffset}>
+    <>
       {/* Optional transparent blocking overlay at the top-most z-index layer. Must be positioned 
       before the below popover card. */}
       {modal && <ViewportOverlay />}
 
-      <PopoverCard
+      <PopoverLayer
         {...rest}
         __unstable_margins={margins}
         animate={animate}
@@ -381,10 +381,11 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
         strategy={strategy}
         x={x}
         y={y}
+        zOffset={zOffset}
       >
         {content}
-      </PopoverCard>
-    </LayerProvider>
+      </PopoverLayer>
+    </>
   )
 
   const children =

package/src/ui/primitives/popover/{popoverCard.tsx → popoverLayer.tsx}

@@ -4,9 +4,8 @@ import {motion} from 'framer-motion'
 import {CSSProperties, ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
-import {Placement, PopoverMargins, Props} from '../../types'
-import {Arrow, useLayer} from '../../utils'
-import {Card, CardElementType, CardOwnProps} from '../card'
+import {Placement, PopoverMargins} from '../../types'
+import {Arrow, Layer, LayerOwnProps, LayerProps} from '../../utils'
 import {Flex} from '../flex'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
@@ -16,10 +15,10 @@ import {
 } from './constants'
 
 /** @internal */
-export const DEFAULT_POPOVER_CARD_ELEMENT = 'div'
+export const DEFAULT_POPOVER_LAYER_ELEMENT = 'div'
 
 /** @internal */
-export type PopoverCardOwnProps = CardOwnProps & {
+export type PopoverLayerOwnProps = LayerOwnProps & {
   /** @beta*/
   __unstable_margins?: PopoverMargins
   animate?: boolean
@@ -37,20 +36,10 @@ export type PopoverCardOwnProps = CardOwnProps & {
 }
 
 /** @internal */
-export type PopoverCardElementType = CardElementType
+export type PopoverLayerProps = PopoverLayerOwnProps & LayerProps<'div'>
 
 /** @internal */
-export type PopoverCardProps<E extends PopoverCardElementType = PopoverCardElementType> = Props<
-  PopoverCardOwnProps,
-  E
->
-
-const MotionCard = motion.create(Card)
-
-/** @internal */
-export function PopoverCard<E extends PopoverCardElementType = typeof DEFAULT_POPOVER_CARD_ELEMENT>(
-  props: PopoverCardProps<E>,
-) {
+export function PopoverLayer(props: PopoverLayerProps) {
   const {
     __unstable_margins: marginsProp,
     animate,
@@ -58,7 +47,6 @@ export function PopoverCard<E extends PopoverCardElementType = typeof DEFAULT_PO
     arrowRef,
     arrowX,
     arrowY,
-    as = DEFAULT_POPOVER_CARD_ELEMENT,
     children,
     maxWidth,
     padding,
@@ -75,9 +63,7 @@ export function PopoverCard<E extends PopoverCardElementType = typeof DEFAULT_PO
     x: xProp,
     y: yProp,
     ...rest
-  } = props as PopoverCardProps<typeof DEFAULT_POPOVER_CARD_ELEMENT>
-
-  const layer = useLayer()
+  } = props
 
   // Get margins: [top, right, bottom, left]
   const margins: PopoverMargins = useMemo(
@@ -94,14 +80,12 @@ export function PopoverCard<E extends PopoverCardElementType = typeof DEFAULT_PO
       left: x,
       originX,
       originY,
-      position: strategy,
       top: y,
       width: referenceWidth,
-      zIndex: layer.zIndex ?? 100,
       willChange: animate ? 'transform' : undefined,
       ...style,
     }),
-    [animate, layer.zIndex, originX, originY, referenceWidth, strategy, style, x, y],
+    [animate, originX, originY, referenceWidth, style, x, y],
   )
 
   const arrowStyle: CSSProperties = useMemo(
@@ -115,15 +99,17 @@ export function PopoverCard<E extends PopoverCardElementType = typeof DEFAULT_PO
   )
 
   return (
-    <MotionCard
+    // @ts-expect-error - TODO: fix this
+    <Layer
       className={popoverCard()}
       data-ui="Popover"
       {...rest}
-      as={as}
+      as={motion.div}
       data-context-tone={tone}
       data-placement={placement}
       direction="column"
       display="flex"
+      position={strategy}
       radius={radius}
       shadow={shadow}
       sizing="border"
@@ -156,8 +142,8 @@ export function PopoverCard<E extends PopoverCardElementType = typeof DEFAULT_PO
           radius={DEFAULT_POPOVER_ARROW_RADIUS}
         />
       )}
-    </MotionCard>
+    </Layer>
   )
 }
 
-PopoverCard.displayName = 'PopoverCard'
+PopoverLayer.displayName = 'PopoverCard'

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

@@ -35,7 +35,7 @@ import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
 import type {ComponentType, Placement, Props} from '../../types'
-import {Layer, type LayerOwnProps, Portal, useBoundaryElement, usePortal} from '../../utils'
+import {type LayerOwnProps, Portal, useBoundaryElement, usePortal} from '../../utils'
 import {getElementRef} from '../../utils/getElementRef'
 import {CardProvider, useCard} from '../card'
 import {Delay} from '../types'
@@ -44,8 +44,8 @@ import {
   DEFAULT_TOOLTIP_DISTANCE,
   DEFAULT_TOOLTIP_PADDING,
 } from './constants'
-import {TooltipCard} from './tooltipCard'
 import {useTooltipDelayGroup} from './tooltipDelayGroup'
+import {TooltipLayer} from './tooltipLayer'
 
 /** @public */
 export const DEFAULT_TOOLTIP_ELEMENT = 'div'
@@ -190,6 +190,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     placement: placementProp,
     whileElementsMounted: autoUpdate,
     elements: {reference: referenceElement},
+    transform: false,
   })
 
   const arrowX = middlewareData.arrow?.x
@@ -381,37 +382,33 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
   if (disabled) return child
 
   const node = (
-    <Layer
+    <TooltipLayer
       data-ui="Tooltip"
+      {...rest}
+      animate={animate}
+      arrow={arrowProp}
+      arrowRef={setArrow}
+      arrowX={arrowX}
+      arrowY={arrowY}
+      as={as}
       className={composeClassNames(className, tooltip())}
+      originX={originX}
+      originY={originY}
+      padding={padding}
+      placement={placement}
+      radius={radius}
       ref={setFloating}
+      scheme={scheme}
+      shadow={shadow}
       style={{
         ...floatingStyles,
         maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : undefined,
       }}
+      tone={tone}
       zOffset={zOffset}
     >
-      <TooltipCard
-        {...rest}
-        animate={animate}
-        arrow={arrowProp}
-        arrowRef={setArrow}
-        arrowX={arrowX}
-        arrowY={arrowY}
-        as={as}
-        originX={originX}
-        originY={originY}
-        padding={padding}
-        placement={placement}
-        radius={radius}
-        ref={setFloating}
-        scheme={scheme}
-        shadow={shadow}
-        tone={tone}
-      >
-        {content}
-      </TooltipCard>
-    </Layer>
+      {content}
+    </TooltipLayer>
   )
 
   const children =

package/src/ui/primitives/tooltip/{tooltipCard.tsx → tooltipLayer.tsx}

@@ -1,11 +1,10 @@
 import {tooltipCard} from '@sanity/ui/css'
-import {motion} from 'framer-motion'
+import {motion, MotionStyle} from 'framer-motion'
 import {type CSSProperties, ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
-import {Placement, Props} from '../../types'
-import {Arrow} from '../../utils'
-import {Card, CardOwnProps} from '../card'
+import {Placement} from '../../types'
+import {Arrow, Layer, LayerOwnProps, LayerProps} from '../../utils'
 import {
   DEFAULT_TOOLTIP_ARROW_HEIGHT,
   DEFAULT_TOOLTIP_ARROW_RADIUS,
@@ -13,10 +12,10 @@ import {
 } from './constants'
 
 /* @internal */
-export const DEFAULT_TOOLTIP_CARD_ELEMENT = 'div'
+export const DEFAULT_TOOLTIP_LAYER_ELEMENT = 'div'
 
 /* @internal */
-export interface TooltipCardOwnProps extends CardOwnProps {
+export interface TooltipLayerOwnProps extends LayerOwnProps {
   animate?: boolean
   arrow: boolean
   arrowRef: ForwardedRef<HTMLDivElement>
@@ -28,29 +27,16 @@ export interface TooltipCardOwnProps extends CardOwnProps {
 }
 
 /** @internal */
-export type TooltipCardElementType = 'div'
+export type TooltipLayerProps = TooltipLayerOwnProps & LayerProps<'div'>
 
 /** @internal */
-export type TooltipCardProps<E extends TooltipCardElementType = TooltipCardElementType> = Props<
-  TooltipCardOwnProps,
-  E
->
-
-const MotionCard = motion.create(Card)
-
-/**
- * @internal
- */
-export function TooltipCard<E extends TooltipCardElementType = typeof DEFAULT_TOOLTIP_CARD_ELEMENT>(
-  props: TooltipCardProps<E>,
-) {
+export function TooltipLayer(props: TooltipLayerProps) {
   const {
     animate,
     arrow,
     arrowRef,
     arrowX,
     arrowY,
-    as = DEFAULT_TOOLTIP_CARD_ELEMENT,
     children,
     originX,
     originY,
@@ -62,9 +48,9 @@ export function TooltipCard<E extends TooltipCardElementType = typeof DEFAULT_TO
     style,
     tone = 'inherit',
     ...rest
-  } = props as TooltipCardProps<typeof DEFAULT_TOOLTIP_CARD_ELEMENT>
+  } = props
 
-  const rootStyle: CSSProperties = useMemo(
+  const rootStyle: MotionStyle = useMemo(
     () => ({
       originX,
       originY,
@@ -85,10 +71,11 @@ export function TooltipCard<E extends TooltipCardElementType = typeof DEFAULT_TO
   )
 
   return (
-    <MotionCard
+    // @ts-expect-error - TODO: fix this
+    <Layer
       data-ui="Tooltip__card"
       {...rest}
-      as={as}
+      as={motion.div}
       className={tooltipCard()}
       data-animate={animate ? '' : undefined}
       data-placement={placement}
@@ -115,8 +102,8 @@ export function TooltipCard<E extends TooltipCardElementType = typeof DEFAULT_TO
           radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
         />
       )}
-    </MotionCard>
+    </Layer>
   )
 }
 
-TooltipCard.displayName = 'TooltipCard'
+TooltipLayer.displayName = 'TooltipLayer'

package/src/css/aspects/height/rules.ts

@@ -1,7 +0,0 @@
-import {responsiveRules} from '../../responsiveRules'
-import {type Rules} from '../../types'
-
-export const heightRules: Rules = {
-  ...responsiveRules('h-fill', {height: '100%'}),
-  ...responsiveRules('h-stretch', {height: 'stretch'}),
-}

package/src/css/aspects/width/rules.ts

@@ -1,8 +0,0 @@
-import {Rules} from '../../types'
-
-export const widthRules: Rules = {
-  'w-fill': {
-    // @ts-expect-error - TODO: fix this
-    width: ['-moz-available', '-webkit-fill-available', 'stretch'],
-  },
-}

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

@@ -1,15 +0,0 @@
-import {Rules} from '../../types'
-import {vars} from '../../vars'
-
-export const menuRules: Rules = {
-  'menu': {
-    outline: 'none',
-  },
-
-  'menu-divider': {
-    height: `1px`,
-    border: 0,
-    backgroundColor: vars.color.border,
-    margin: 0,
-  },
-}

package/src/css/primitives/avatar/rules.ts

@@ -1,176 +0,0 @@
-import {AVATAR_SIZE, THEME_COLOR_AVATAR_COLORS} from '@sanity/ui/theme'
-
-import {responsiveRules} from '../../responsiveRules'
-import {Properties, Rules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-
-export const avatarRules: Rules = {
-  'avatar': {
-    'backgroundColor': vars.color.avatar.bg,
-    'position': 'relative',
-    'boxSizing': 'border-box',
-    'userSelect': 'none',
-    'boxShadow': `0 0 0 1px ${vars.color.bg}`,
-    'lineHeight': 0,
-
-    'width': vars.avatar.size,
-    'height': vars.avatar.size,
-    'borderRadius': vars.avatar.size,
-
-    '@nest': {
-      '&[data-status="inactive"]': {
-        opacity: 0.5,
-      },
-
-      // &:is(button)
-      '&:is(button)': {
-        WebkitFontSmoothing: 'inherit',
-        appearance: 'none',
-        margin: 0,
-        padding: 0,
-        border: 0,
-        font: 'inherit',
-        color: 'inherit',
-        outline: 'none',
-      },
-
-      '&:is(button):focus': {
-        outline: 'var(--avatar-focus-ring-width) solid var(--color-focus-ring)',
-        outlineOffset: 'var(--avatar-focus-ring-offset)',
-      },
-
-      '&:is(button):focus:not(:focus-visible)': {
-        boxShadow: 'none',
-      },
-
-      ':disabled &, [data-disabled] &': {
-        [varNames.color.avatar.bg]: vars.color.border,
-        [varNames.color.avatar.fg]: vars.color.bg,
-      },
-
-      ...THEME_COLOR_AVATAR_COLORS.reduce(
-        (acc, color) => {
-          return {
-            ...acc,
-            [`&.${color}`]: {
-              [varNames.color.avatar.bg]: vars.color.avatar[color].bg,
-              [varNames.color.avatar.fg]: vars.color.avatar[color].fg,
-            },
-          }
-        },
-        {} as Record<string, Properties>,
-      ),
-    },
-  },
-
-  ...(AVATAR_SIZE.reduce((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`avatar-${size}`, {
-        [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
-        [varNames.avatar.size]: vars.avatar.sizes[size].size,
-      }),
-    }
-  }, {} as Rules) as Rules),
-
-  'avatar-arrow': {
-    'position': 'absolute',
-    'boxSizing': 'border-box',
-    'zIndex': 0,
-    'opacity': 0,
-    'transition': 'all 0.2s linear',
-    'transform': 'rotate(-90deg) translate3d(0, 6px, 0)',
-    'left': 0,
-    'right': 0,
-    'top': 0,
-    'bottom': 0,
-
-    '@nest': {
-      '& > svg': {
-        display: 'block',
-        width: '11px',
-        height: '7px',
-        position: 'absolute',
-        top: '-5px',
-        left: '50%',
-        transform: 'translateX(-6px)',
-      },
-
-      '[data-arrow-position="inside"] > &': {
-        transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
-        opacity: 0,
-      },
-
-      '[data-arrow-position="top"] > &': {
-        opacity: 1,
-        transform: 'rotate(0deg)',
-      },
-
-      '[data-arrow-position="bottom"] > &': {
-        opacity: 1,
-        transform: 'rotate(-180deg)',
-      },
-    },
-  },
-
-  'avatar-image': {
-    '@nest': {
-      '& > img': {
-        display: 'block',
-        position: 'absolute',
-        width: vars.avatar.size,
-        height: vars.avatar.size,
-        borderRadius: vars.avatar.size,
-      },
-
-      '& > span': {
-        display: 'block',
-        position: 'absolute',
-        width: vars.avatar.size,
-        height: vars.avatar.size,
-        borderRadius: vars.avatar.size,
-        boxShadow: [
-          `inset 0 0 0 1px ${vars.color.avatar.bg}`,
-          `inset 0 0 0 1.75px ${vars.color.bg}`,
-        ].join(', '),
-      },
-
-      '[data-image-error] &': {
-        display: 'none',
-      },
-    },
-  },
-
-  'avatar-initials': {
-    color: vars.color.avatar.fg,
-    borderRadius: vars.avatar.size,
-  },
-
-  'avatar-counter': {
-    'color': vars.color.fg,
-    'backgroundColor': vars.color.bg,
-    'boxShadow': [`0 0 0 1px ${vars.color.bg}`, `inset 0 0 0 1px ${vars.color.border}`].join(', '),
-    'userSelect': 'none',
-    'borderRadius': vars.avatar.size,
-    'height': vars.avatar.size,
-
-    '@nest': {
-      '&&': {
-        minWidth: vars.avatar.size,
-      },
-
-      '[data-hide-inner-stroke] &': {
-        boxShadow: `0 0 0 1px ${vars.color.bg}`,
-      },
-    },
-  },
-
-  'avatar-stack': {
-    '@nest': {
-      '& > div + div': {
-        marginLeft: vars.avatar.distance,
-      },
-    },
-  },
-}