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

package/dist/cli.js

@@ -335,7 +335,7 @@ class CAC extends events.EventEmitter {
   }
 }
 const cac = (name = "") => new CAC(name);
-var version = "3.0.0-static.13";
+var version = "3.0.0-static.14";
 const cli = cac("ui");
 cli.command("build").option("--cwd [cwd]", "Working directory").option("--outDir [outDir]", "Output directory").action(async (options) => {
   const {

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, buildTheme_v3 } from "@sanity/ui/theme";
-import { isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, isHTMLElement, EMPTY_ARRAY, useElementSize, Code, _isEnterToClickElement, Card, Text, useArrayProp, EMPTY_RECORD, Box, Button, Stack, Popover, TextInput, AnimatedSpinnerIcon, useClickOutsideEvent, Flex, containsOrEqualsElement, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, createGlobalScopedContext, usePrefersReducedMotion, Portal, Z_OFFSETS, Container, Layer, Grid, LayerProvider, isRecord, Selectable, useCard } from "./_chunks-es/_visual-editing.mjs";
+import { isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, isHTMLElement, EMPTY_ARRAY, useElementSize, Code, _isEnterToClickElement, Card, Text, useArrayProp, EMPTY_RECORD, Box, Button, Stack, Popover, TextInput, AnimatedSpinnerIcon, useClickOutsideEvent, Flex, containsOrEqualsElement, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, createGlobalScopedContext, usePrefersReducedMotion, Z_OFFSETS, Portal, Container, Layer, Grid, LayerProvider, isRecord, Selectable, useCard } from "./_chunks-es/_visual-editing.mjs";
 import { Arrow, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, CardProvider, Checkbox, DEFAULT_ARROW_ELEMENT, DEFAULT_AVATAR_COUNTER_ELEMENT, DEFAULT_AVATAR_ELEMENT, DEFAULT_AVATAR_STACK_ELEMENT, DEFAULT_BADGE_ELEMENT, DEFAULT_BOX_ELEMENT, DEFAULT_BUTTON_ELEMENT, DEFAULT_CARD_ELEMENT, DEFAULT_CHECKBOX_ELEMENT, DEFAULT_CODE_ELEMENT, DEFAULT_CONTAINER_ELEMENT, DEFAULT_ELEMENT_QUERY_ELEMENT, DEFAULT_FLEX_ELEMENT, DEFAULT_GRID_ELEMENT, DEFAULT_HEADING_ELEMENT, DEFAULT_HOTKEYS_ELEMENT, DEFAULT_INLINE_ELEMENT, DEFAULT_KBD_ELEMENT, DEFAULT_LABEL_ELEMENT, DEFAULT_LAYER_ELEMENT, DEFAULT_MENU_DIVIDER_ELEMENT, DEFAULT_MENU_ELEMENT, DEFAULT_MENU_GROUP_ELEMENT, DEFAULT_MENU_ITEM_ELEMENT, DEFAULT_POPOVER_ELEMENT, DEFAULT_RADIO_ELEMENT, DEFAULT_SELECT_ELEMENT, DEFAULT_SPINNER_ELEMENT, DEFAULT_SR_ONLY_ELEMENT, DEFAULT_STACK_ELEMENT, DEFAULT_SWITCH_ELEMENT, DEFAULT_TAB_ELEMENT, DEFAULT_TAB_LIST_ELEMENT, DEFAULT_TEXT_AREA_ELEMENT, DEFAULT_TEXT_ELEMENT, DEFAULT_TEXT_INPUT_ELEMENT, DEFAULT_TOOLTIP_ELEMENT, DEFAULT_VIRTUAL_LIST_ELEMENT, ElementQuery, Heading, Hotkeys, Inline, KBD, Label, Menu, MenuDivider, MenuGroup, MenuItem, PortalProvider, Radio, Select, Spinner, SrOnly, Switch, Tab, TabList, TextArea, ThemeColorProvider, ThemeProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, VirtualList, _ResizeObserver, _elementSizeObserver, _getArrayProp, _isScrollable, studioTheme, useCustomValidity, useMatchMedia, useMediaIndex, usePrefersDark, useRootTheme, useTheme, useTheme_v2, useTooltipDelayGroup } from "./_chunks-es/_visual-editing.mjs";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { ChevronDownIcon, CloseIcon, ToggleArrowRightIcon } from "@sanity/icons";

package/package.json

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

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}

@@ -5,8 +5,8 @@ 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 {Arrow, Layer, LayerOwnProps} from '../../utils'
+import {CardElementType} from '../card'
 import {Flex} from '../flex'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
@@ -16,10 +16,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 +37,20 @@ export type PopoverCardOwnProps = CardOwnProps & {
 }
 
 /** @internal */
-export type PopoverCardElementType = CardElementType
+export type PopoverLayerElementType = CardElementType
 
 /** @internal */
-export type PopoverCardProps<E extends PopoverCardElementType = PopoverCardElementType> = Props<
-  PopoverCardOwnProps,
+export type PopoverLayerProps<E extends PopoverLayerElementType = PopoverLayerElementType> = Props<
+  PopoverLayerOwnProps,
   E
 >
 
-const MotionCard = motion.create(Card)
+const MotionLayer = motion.create(Layer)
 
 /** @internal */
-export function PopoverCard<E extends PopoverCardElementType = typeof DEFAULT_POPOVER_CARD_ELEMENT>(
-  props: PopoverCardProps<E>,
-) {
+export function PopoverLayer<
+  E extends PopoverLayerElementType = typeof DEFAULT_POPOVER_LAYER_ELEMENT,
+>(props: PopoverLayerProps<E>) {
   const {
     __unstable_margins: marginsProp,
     animate,
@@ -58,7 +58,7 @@ export function PopoverCard<E extends PopoverCardElementType = typeof DEFAULT_PO
     arrowRef,
     arrowX,
     arrowY,
-    as = DEFAULT_POPOVER_CARD_ELEMENT,
+    as = DEFAULT_POPOVER_LAYER_ELEMENT,
     children,
     maxWidth,
     padding,
@@ -75,9 +75,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 as PopoverLayerProps<typeof DEFAULT_POPOVER_LAYER_ELEMENT>
 
   // Get margins: [top, right, bottom, left]
   const margins: PopoverMargins = useMemo(
@@ -94,14 +92,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,7 +111,7 @@ export function PopoverCard<E extends PopoverCardElementType = typeof DEFAULT_PO
   )
 
   return (
-    <MotionCard
+    <MotionLayer
       className={popoverCard()}
       data-ui="Popover"
       {...rest}
@@ -124,6 +120,7 @@ export function PopoverCard<E extends PopoverCardElementType = typeof DEFAULT_PO
       data-placement={placement}
       direction="column"
       display="flex"
+      position={strategy}
       radius={radius}
       shadow={shadow}
       sizing="border"
@@ -156,8 +153,8 @@ export function PopoverCard<E extends PopoverCardElementType = typeof DEFAULT_PO
           radius={DEFAULT_POPOVER_ARROW_RADIUS}
         />
       )}
-    </MotionCard>
+    </MotionLayer>
   )
 }
 
-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'
@@ -381,37 +381,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}

@@ -4,8 +4,7 @@ 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 {Arrow, Layer, LayerOwnProps} 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,27 @@ export interface TooltipCardOwnProps extends CardOwnProps {
 }
 
 /** @internal */
-export type TooltipCardElementType = 'div'
+export type TooltipLayerElementType = 'div'
 
 /** @internal */
-export type TooltipCardProps<E extends TooltipCardElementType = TooltipCardElementType> = Props<
-  TooltipCardOwnProps,
+export type TooltipLayerProps<E extends TooltipLayerElementType = TooltipLayerElementType> = Props<
+  TooltipLayerOwnProps,
   E
 >
 
-const MotionCard = motion.create(Card)
+const MotionLayer = motion.create(Layer)
 
-/**
- * @internal
- */
-export function TooltipCard<E extends TooltipCardElementType = typeof DEFAULT_TOOLTIP_CARD_ELEMENT>(
-  props: TooltipCardProps<E>,
-) {
+/** @internal */
+export function TooltipLayer<
+  E extends TooltipLayerElementType = typeof DEFAULT_TOOLTIP_LAYER_ELEMENT,
+>(props: TooltipLayerProps<E>) {
   const {
     animate,
     arrow,
     arrowRef,
     arrowX,
     arrowY,
-    as = DEFAULT_TOOLTIP_CARD_ELEMENT,
+    as = DEFAULT_TOOLTIP_LAYER_ELEMENT,
     children,
     originX,
     originY,
@@ -62,7 +59,7 @@ export function TooltipCard<E extends TooltipCardElementType = typeof DEFAULT_TO
     style,
     tone = 'inherit',
     ...rest
-  } = props as TooltipCardProps<typeof DEFAULT_TOOLTIP_CARD_ELEMENT>
+  } = props as TooltipLayerProps<typeof DEFAULT_TOOLTIP_LAYER_ELEMENT>
 
   const rootStyle: CSSProperties = useMemo(
     () => ({
@@ -85,7 +82,7 @@ export function TooltipCard<E extends TooltipCardElementType = typeof DEFAULT_TO
   )
 
   return (
-    <MotionCard
+    <MotionLayer
       data-ui="Tooltip__card"
       {...rest}
       as={as}
@@ -115,8 +112,8 @@ export function TooltipCard<E extends TooltipCardElementType = typeof DEFAULT_TO
           radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
         />
       )}
-    </MotionCard>
+    </MotionLayer>
   )
 }
 
-TooltipCard.displayName = 'TooltipCard'
+TooltipLayer.displayName = 'TooltipLayer'