@sanity/ui 3.0.0-static.2 → 3.0.0-static.21

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

@@ -1,9 +1,9 @@
-import {ReactElement, ReactNode, useMemo} from 'react'
+import {type ReactElement, type ReactNode, useMemo} from 'react'
 
 import {useDelayedState} from '../../../hooks/useDelayedState'
-import {Delay} from '../../types'
+import type {Delay} from '../../types'
 import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
-import {TooltipDelayGroupContextValue} from './types'
+import type {TooltipDelayGroupContextValue} from './types'
 
 /**
  * @public
@@ -51,5 +51,3 @@ export function TooltipDelayGroupProvider(props: TooltipDelayGroupProviderProps)
     <TooltipDelayGroupContext.Provider value={value}>{children}</TooltipDelayGroupContext.Provider>
   )
 }
-
-TooltipDelayGroupProvider.displayName = 'TooltipDelayGroupProvider'

package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts

@@ -1,7 +1,7 @@
 import {useContext} from 'react'
 
 import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
-import {TooltipDelayGroupContextValue} from './types'
+import type {TooltipDelayGroupContextValue} from './types'
 
 /**
  * @beta

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

@@ -0,0 +1,105 @@
+import {motion, type MotionStyle} from 'framer-motion'
+import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
+
+import {POPOVER_MOTION_PROPS} from '../../constants'
+import type {Placement} from '../../types'
+import {Arrow, Layer, type LayerOwnProps, type LayerProps} from '../../utils'
+import {
+  DEFAULT_TOOLTIP_ARROW_HEIGHT,
+  DEFAULT_TOOLTIP_ARROW_RADIUS,
+  DEFAULT_TOOLTIP_ARROW_WIDTH,
+} from './constants'
+
+/* @internal */
+export const DEFAULT_TOOLTIP_LAYER_ELEMENT = 'div'
+
+/* @internal */
+export interface TooltipLayerOwnProps extends LayerOwnProps {
+  animate?: boolean
+  arrow: boolean
+  arrowRef: ForwardedRef<HTMLDivElement>
+  arrowX?: number
+  arrowY?: number
+  originX?: number
+  originY?: number
+  placement?: Placement
+}
+
+/** @internal */
+export type TooltipLayerProps = TooltipLayerOwnProps & LayerProps<'div'>
+
+/** @internal */
+export function TooltipLayer(props: TooltipLayerProps) {
+  const {
+    animate,
+    arrow,
+    arrowRef,
+    arrowX,
+    arrowY,
+    children,
+    originX,
+    originY,
+    padding,
+    placement,
+    radius,
+    scheme,
+    shadow,
+    style,
+    tone = 'inherit',
+    ...rest
+  } = props
+
+  const rootStyle: MotionStyle = useMemo(
+    () => ({
+      originX,
+      originY,
+      willChange: animate ? 'transform' : undefined,
+      ...style,
+    }),
+    [animate, originX, originY, style],
+  )
+
+  const arrowStyle: CSSProperties = useMemo(
+    () => ({
+      left: arrowX !== null ? arrowX : undefined,
+      top: arrowY !== null ? arrowY : undefined,
+      right: undefined,
+      bottom: undefined,
+    }),
+    [arrowX, arrowY],
+  )
+
+  return (
+    // @ts-expect-error - TODO: fix this
+    <Layer
+      data-ui="Tooltip__layer"
+      {...rest}
+      as={motion.div}
+      data-animate={animate ? '' : undefined}
+      data-placement={placement}
+      padding={padding}
+      radius={radius}
+      scheme={scheme}
+      shadow={shadow}
+      style={rootStyle}
+      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}
+      tone={tone}
+    >
+      {children}
+
+      {arrow && (
+        <Arrow
+          ref={arrowRef}
+          style={arrowStyle}
+          width={DEFAULT_TOOLTIP_ARROW_WIDTH}
+          height={DEFAULT_TOOLTIP_ARROW_HEIGHT}
+          radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
+        />
+      )}
+    </Layer>
+  )
+}

package/src/core/primitives/types.ts

@@ -1,32 +1,26 @@
-import {
-  type FlexAlign,
-  type FlexDirection,
-  type FlexJustify,
-  type FlexValue,
-  type FlexWrap,
+import type {
+  AlignItems,
+  Flex,
+  FlexDirection,
+  FlexWrap,
   GridItemColumn,
   GridItemColumnEnd,
   GridItemColumnStart,
   GridItemRow,
   GridItemRowEnd,
   GridItemRowStart,
+  JustifyContent,
 } from '@sanity/ui/css'
 
-import {
-  type BoxDisplay,
-  type BoxHeight,
-  type BoxOverflow,
-  type BoxSizing,
-  type GridAutoCols,
-  type GridAutoFlow,
-  type GridAutoRows,
-  // type GridItemColumn,
-  // type GridItemColumnEnd,
-  // type GridItemColumnStart,
-  // type GridItemRow,
-  // type GridItemRowEnd,
-  // type GridItemRowStart,
-  type Radius,
+import type {
+  BoxDisplay,
+  BoxHeight,
+  BoxOverflow,
+  BoxSizing,
+  GridAutoCols,
+  GridAutoFlow,
+  GridAutoRows,
+  Radius,
 } from '../types'
 
 /**
@@ -57,9 +51,9 @@ export interface ResponsiveBoxProps {
  * @deprecated
  */
 export interface ResponsiveFlexProps {
-  align?: FlexAlign | FlexAlign[]
+  align?: AlignItems | AlignItems[]
   direction?: FlexDirection | FlexDirection[]
-  justify?: FlexJustify | FlexJustify[]
+  justify?: JustifyContent | JustifyContent[]
   wrap?: FlexWrap | FlexWrap[]
 }
 
@@ -69,7 +63,7 @@ export interface ResponsiveFlexProps {
  */
 export interface ResponsiveFlexItemProps {
   /** Sets the flex CSS attribute. The property is responsive. */
-  flex?: FlexValue | FlexValue[]
+  flex?: Flex | Flex[]
 }
 
 /**
@@ -81,9 +75,6 @@ export interface ResponsiveGridProps {
   autoCols?: GridAutoCols | GridAutoCols[]
   autoFlow?: GridAutoFlow | GridAutoFlow[]
   columns?: number | number[]
-  // gap?: number | number[]
-  // gapX?: number | number[]
-  // gapY?: number | number[]
   rows?: number | number[]
 }
 
@@ -155,9 +146,7 @@ export interface ResponsiveWidthProps {
   width?: number | 'auto' | (number | 'auto')[]
 }
 
-/**
- * @public
- */
+/** @public */
 export type Delay =
   | number
   | Partial<{

package/src/core/types/avatar.ts

@@ -3,17 +3,14 @@ export {
   type AvatarSize,
 } from '@sanity/ui/theme'
 
-/**
- * @public
- */
+/** @public */
 export type AvatarPosition = 'top' | 'bottom' | 'inside'
 
-/**
- * @public
- */
+/** @public */
 // export type AvatarSize = 0 | 1 | 2 | 3
 
 /**
  * @public
+ * @deprecated Will be removed in next major version.
  */
 export type AvatarStatus = 'online' | 'editing' | 'inactive'

package/src/core/types/badge.ts

@@ -1,4 +1,4 @@
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 /**
  * @public
@@ -6,7 +6,5 @@ import {ThemeColorStateToneKey} from '@sanity/ui/theme'
  */
 export type BadgeMode = 'default' | 'outline'
 
-/**
- * @public
- */
+/** @public */
 export type BadgeTone = ThemeColorStateToneKey

package/src/core/types/button.ts

@@ -1,4 +1,4 @@
-import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 /**
  * @public
@@ -6,9 +6,7 @@ import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
  */
 export type ButtonMode = ThemeColorButtonModeKey
 
-/**
- * @public
- */
+/** @public */
 export type ButtonTextAlign = 'left' | 'right' | 'center'
 
 /**

package/src/core/types/card.ts

@@ -1,6 +1,4 @@
-import {ThemeColorCardToneKey} from '@sanity/ui/theme'
+import type {ThemeColorCardToneKey} from '@sanity/ui/theme'
 
-/**
- * @public
- */
+/** @public */
 export type CardTone = ThemeColorCardToneKey | 'inherit'

package/src/core/types/dialog.ts

@@ -1,4 +1,2 @@
-/**
- * @public
- */
+/** @public */
 export type DialogPosition = 'absolute' | 'fixed'

package/src/core/types/flex.ts

@@ -3,7 +3,7 @@ export {
    * @public
    * @deprecated
    */
-  type FlexAlign,
+  type AlignItems as FlexAlign,
   /**
    * @public
    * @deprecated
@@ -13,12 +13,12 @@ export {
    * @public
    * @deprecated
    */
-  type FlexJustify,
+  type JustifyContent as FlexJustify,
   /**
    * @public
    * @deprecated
    */
-  type FlexValue,
+  type Flex as FlexValue,
   /**
    * @public
    * @deprecated

package/src/core/types/props.ts

@@ -1,18 +1,28 @@
-import type {ComponentProps, ElementType} from 'react'
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 
-export interface PolymorphicProps {
-  as?: ElementType
-}
+import type {ComponentClass, ComponentProps, ExoticComponent, FunctionComponent, JSX} from 'react'
+
+/**
+ * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
+ *
+ * @public
+ */
+export type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
+
+/** @public */
+export type EmptyProps = {}
+
+/** @public */
+export type TagType = keyof JSX.IntrinsicElements
 
 /** @public */
-export type ElementProps<E extends ElementType> = Omit<ComponentProps<E>, 'as' | 'ref'>
+export type ComponentType<P = any> = FunctionComponent<P> | ComponentClass<P> | ExoticComponent<P>
 
 /** @public */
-export type Assign<T, U> = Omit<T, keyof U> & U
+export type ElementType<P> = TagType | ComponentType<P>
 
 /** @public */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export type Props<P extends {} = {}, E extends ElementType = ElementType> = Assign<
-  ElementProps<E> & PolymorphicProps,
-  P
+export type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
+  E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
+  P & {as?: E}
 >

package/src/core/types/selectable.ts

@@ -1,4 +1,4 @@
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 /**
  * @public

package/src/core/utils/arrow/arrow.tsx

@@ -1,18 +1,38 @@
-import {_arrow, _arrowShape, _arrowStroke} from '@sanity/ui/css'
-import {CSSProperties, ForwardedRef, forwardRef, ReactElement, useMemo} from 'react'
+import {_arrow, _arrowShape, _arrowStroke, _arrowStrokeMask, _arrowSvg, vars} from '@sanity/ui/css'
+import {assignInlineVars} from '@vanilla-extract/dynamic'
+import {useMemo} from 'react'
 
-import {useTheme_v2} from '../../_compat'
-import {Props} from '../../types'
-import {compileCommands, getRoundedCommands, Point} from './cmds'
+import type {ComponentType, Props} from '../../types'
+import {compileCommands, getRoundedCommands, type Point} from './cmds'
 
 /** @internal */
-export const Arrow = forwardRef(function Arrow(
-  props: Props<{width: number; height: number; radius?: number}, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-): ReactElement {
-  const {width: w, height: h, radius = 0, style, ...restProps} = props
-  const {card} = useTheme_v2()
-  const strokeWidth = card.shadow.outline
+export const DEFAULT_ARROW_ELEMENT = 'div'
+
+/** @internal */
+export type ArrowOwnProps = {
+  width: number
+  height: number
+  radius?: number
+}
+
+/** @internal */
+export type ArrowElementType = 'div' | 'span' | ComponentType
+
+/** @internal */
+export type ArrowProps<E extends ArrowElementType = ArrowElementType> = Props<ArrowOwnProps, E>
+
+/** @internal */
+export function Arrow<E extends ArrowElementType = typeof DEFAULT_ARROW_ELEMENT>(
+  props: ArrowProps<E>,
+) {
+  const {
+    as: Element = DEFAULT_ARROW_ELEMENT,
+    width: w,
+    height: h,
+    radius = 0,
+    style,
+    ...rest
+  } = props as ArrowProps<typeof DEFAULT_ARROW_ELEMENT>
 
   const center = w / 2
 
@@ -34,26 +54,21 @@ export const Arrow = forwardRef(function Arrow(
   const fillPath = `${path} M ${w} -1 M 0 -1 Z`
 
   return (
-    <div
-      {...restProps}
+    <Element
+      {...rest}
       className={_arrow()}
-      ref={ref}
-      style={{...style, '--arrow-size': `${w}px`} as CSSProperties}
+      style={{
+        ...style,
+        ...assignInlineVars({[vars.arrow.size]: `${w}px`}),
+      }}
     >
-      <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
+      <svg className={_arrowSvg()} 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>
+    </Element>
   )
-})
-
-Arrow.displayName = 'ForwardRef(Arrow)'
+}

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

@@ -1,14 +1,14 @@
-/** @jest-environment jsdom */
+import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
 import {BoundaryElementContext} from './boundaryElementContext'
-import {BoundaryElementContextValue} from './types'
+import type {BoundaryElementContextValue} from './types'
 import {useBoundaryElement} from './useBoundaryElement'
 
 describe('utils/boundaryElement', () => {
   describe('useBoundaryElement', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootBoundaryElement = useBoundaryElement()
@@ -38,7 +38,7 @@ describe('utils/boundaryElement', () => {
     })
 
     it('should provide default value when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootBoundaryElement = useBoundaryElement()
@@ -65,7 +65,7 @@ describe('utils/boundaryElement', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

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

@@ -1,5 +1,5 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {BoundaryElementContextValue} from './types'
+import type {BoundaryElementContextValue} from './types'
 
 export const BoundaryElementContext = createGlobalScopedContext<BoundaryElementContextValue | null>(
   '@sanity/ui/context/boundaryElement',

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

@@ -1,24 +1,18 @@
-import {ReactElement, ReactNode, useMemo} from 'react'
+import {type ReactElement, type ReactNode, useMemo} from 'react'
 
 import {BoundaryElementContext} from './boundaryElementContext'
-import {BoundaryElementContextValue} from './types'
+import type {BoundaryElementContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export interface BoundaryElementProviderProps {
   children: ReactNode
   element: HTMLElement | null
 }
 
-/**
- * @public
- */
+/** @public */
 export function BoundaryElementProvider(props: BoundaryElementProviderProps): ReactElement {
   const {children, element} = props
   const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
 
   return <BoundaryElementContext.Provider value={value}>{children}</BoundaryElementContext.Provider>
 }
-
-BoundaryElementProvider.displayName = 'BoundaryElementProvider'

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

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface BoundaryElementContextValue {
   version: 0.0
   element: HTMLElement | null

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

@@ -2,16 +2,14 @@ import {useContext} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
 import {BoundaryElementContext} from './boundaryElementContext'
-import {BoundaryElementContextValue} from './types'
+import type {BoundaryElementContextValue} from './types'
 
 const DEFAULT_VALUE: BoundaryElementContextValue = {
   version: 0.0,
   element: null,
 }
 
-/**
- * @public
- */
+/** @public */
 export function useBoundaryElement(): BoundaryElementContextValue {
   const value = useContext(BoundaryElementContext)
 

package/src/core/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,27 +1,34 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
+import {varNames, vars} from '@sanity/ui/css'
 import {styled} from 'styled-components'
 
 const TestCard = styled(Card)`
-  --card-fg-color: orange;
-
   [data-eq-min~='0'] > & {
-    --card-fg-color: green;
+    ${varNames.color.fg}: light-dark(${vars.palette.orange[600]}, ${vars.palette.orange[400]});
   }
 
   [data-eq-min~='1'] > & {
-    --card-fg-color: blue;
+    ${varNames.color.fg}: light-dark(${vars.palette.red[600]}, ${vars.palette.red[400]});
+  }
+
+  [data-eq-min~='2'] > & {
+    ${varNames.color.fg}: light-dark(${vars.palette.magenta[600]}, ${vars.palette.magenta[400]});
+  }
+
+  [data-eq-min~='3'] > & {
+    ${varNames.color.fg}: light-dark(${vars.palette.purple[600]}, ${vars.palette.purple[400]});
   }
 `
 
 export default function CustomMediaQuery() {
   return (
-    <Box padding={[3, 4, 5]}>
-      <Box marginBottom={[3, 4, 5]}>
+    <Box padding={4}>
+      <Box marginBottom={4}>
         <Text>Resize this frame to see the text color change:</Text>
       </Box>
 
-      <ElementQuery media={[100, 200, 300]}>
-        <TestCard padding={2} shadow={1}>
+      <ElementQuery media={[0, 100, 200, 300]}>
+        <TestCard padding={3} shadow={1}>
           <Text>This card sits inside an element query.</Text>
         </TestCard>
       </ElementQuery>