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

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,107 @@
+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>
+  )
+}
+
+TooltipLayer.displayName = 'TooltipLayer'

package/src/core/primitives/types.ts

@@ -1,9 +1,9 @@
-import {
-  type FlexAlign,
-  type FlexDirection,
-  type FlexJustify,
-  type FlexValue,
-  type FlexWrap,
+import type {
+  FlexAlign,
+  FlexDirection,
+  FlexJustify,
+  FlexValue,
+  FlexWrap,
   GridItemColumn,
   GridItemColumnEnd,
   GridItemColumnStart,
@@ -12,21 +12,15 @@ import {
   GridItemRowStart,
 } 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'
 
 /**
@@ -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/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,37 @@
-import {_arrow, _arrowShape, _arrowStroke} from '@sanity/ui/css'
-import {CSSProperties, ForwardedRef, forwardRef, ReactElement, useMemo} from 'react'
+import {_arrow, _arrowShape, _arrowStroke, _arrowStrokeMask, varNames} from '@sanity/ui/css'
+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 +53,16 @@ export const Arrow = forwardRef(function Arrow(
   const fillPath = `${path} M ${w} -1 M 0 -1 Z`
 
   return (
-    <div
-      {...restProps}
-      className={_arrow()}
-      ref={ref}
-      style={{...style, '--arrow-size': `${w}px`} as CSSProperties}
-    >
+    <Element {...rest} className={_arrow()} style={{...style, [varNames.arrow.size]: `${w}px`}}>
       <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>
+    </Element>
   )
-})
+}
 
-Arrow.displayName = 'ForwardRef(Arrow)'
+Arrow.displayName = '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,19 +1,15 @@
-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])

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>

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

@@ -1,53 +1,77 @@
-import {ForwardedRef, forwardRef, useImperativeHandle, useMemo, useState} from 'react'
+import {BREAKPOINTS} from '@sanity/ui/css'
+import {useImperativeHandle, useMemo, useState} from 'react'
 
-import {useTheme_v2} from '../../_compat'
 import {useElementSize} from '../../hooks'
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
+/** @beta */
+export const DEFAULT_ELEMENT_QUERY_ELEMENT = 'div'
+
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
  */
-export interface MediaQueryProps {
+export type ElementQueryOwnProps = {
   media?: number[]
 }
 
+/** @beta */
+export type ElementQueryElementType = 'div' | ComponentType
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type ElementQueryProps<E extends ElementQueryElementType = ElementQueryElementType> = Props<
+  ElementQueryOwnProps,
+  E
+>
+
+const DEFAULT_BREAKPOINTS = Object.values(BREAKPOINTS)
+
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
  */
-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
+export function ElementQuery<
+  E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT,
+>(props: ElementQueryProps<E>) {
+  const {
+    as: Element = DEFAULT_ELEMENT_QUERY_ELEMENT,
+    children,
+    media: mediaProp,
+    ref: forwardedRef,
+    ...rest
+  } = props as ElementQueryProps<typeof DEFAULT_ELEMENT_QUERY_ELEMENT>
+
+  const breakpoints = mediaProp ?? DEFAULT_BREAKPOINTS
 
   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,
   ])
 
   return (
-    <div data-ui="ElementQuery" {...restProps} data-eq-max={max} data-eq-min={min} ref={setElement}>
+    <Element data-ui="ElementQuery" {...rest} data-eq-max={max} data-eq-min={min} ref={setElement}>
       {children}
-    </div>
+    </Element>
   )
-})
-ElementQuery.displayName = 'ForwardRef(ElementQuery)'
+}
+
+ElementQuery.displayName = 'ElementQuery'

package/src/core/utils/errorBoundary.tsx

@@ -1,4 +1,4 @@
-import {Component, ErrorInfo, PropsWithChildren, ReactNode} from 'react'
+import {Component, type ErrorInfo, type PropsWithChildren, type ReactNode} from 'react'
 
 import {Code} from '../primitives/code'
 
@@ -23,18 +23,20 @@ export interface ErrorBoundaryState {
  * @beta
  */
 export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  state: ErrorBoundaryState = {error: null}
+  override state: ErrorBoundaryState = {error: null}
+
+  static displayName = 'ErrorBoundary'
 
   static getDerivedStateFromError(error: Error): ErrorBoundaryState {
     // Update state so the next render will show the fallback UI.
     return {error}
   }
 
-  componentDidCatch(error: Error, info: ErrorInfo): void {
+  override componentDidCatch(error: Error, info: ErrorInfo): void {
     this.props.onCatch({error, info})
   }
 
-  render(): ReactNode {
+  override render(): ReactNode {
     const {error} = this.state
 
     if (error) {

package/src/core/utils/index.ts

@@ -1,6 +1,5 @@
 export * from './arrow'
 export * from './boundaryElement'
-export * from './conditionalWrapper'
 export * from './elementQuery'
 export * from './errorBoundary'
 export * from './layer'