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

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

@@ -1,21 +1,22 @@
 import {tooltipCard} from '@sanity/ui/css'
 import {motion} from 'framer-motion'
-import {CSSProperties, ForwardedRef, forwardRef, memo, useMemo} from 'react'
+import {type CSSProperties, ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
 import {Placement, Props} from '../../types'
 import {Arrow} from '../../utils'
-import {Card, CardProps} from '../card'
+import {Card, CardOwnProps} from '../card'
 import {
   DEFAULT_TOOLTIP_ARROW_HEIGHT,
   DEFAULT_TOOLTIP_ARROW_RADIUS,
   DEFAULT_TOOLTIP_ARROW_WIDTH,
 } from './constants'
 
-const MotionCard = motion.create(Card)
+/* @internal */
+export const DEFAULT_TOOLTIP_CARD_ELEMENT = 'div'
 
 /* @internal */
-export interface TooltipCardProps extends CardProps {
+export interface TooltipCardOwnProps extends CardOwnProps {
   animate?: boolean
   arrow: boolean
   arrowRef: ForwardedRef<HTMLDivElement>
@@ -26,90 +27,96 @@ export interface TooltipCardProps extends CardProps {
   placement?: Placement
 }
 
+/** @internal */
+export type TooltipCardElementType = 'div'
+
+/** @internal */
+export type TooltipCardProps<E extends TooltipCardElementType = TooltipCardElementType> = Props<
+  TooltipCardOwnProps,
+  E
+>
+
+const MotionCard = motion.create(Card)
+
 /**
  * @internal
  */
-export const TooltipCard = memo(
-  forwardRef(function TooltipCard(
-    props: Omit<
-      Props<TooltipCardProps, 'div'>,
-      'onDrag' | 'onDragEnd' | 'onDragStart' | 'onAnimationStart'
-    >,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) {
-    const {
-      animate,
-      arrow,
-      arrowRef,
-      arrowX,
-      arrowY,
-      children,
+export function TooltipCard<E extends TooltipCardElementType = typeof DEFAULT_TOOLTIP_CARD_ELEMENT>(
+  props: TooltipCardProps<E>,
+) {
+  const {
+    animate,
+    arrow,
+    arrowRef,
+    arrowX,
+    arrowY,
+    as = DEFAULT_TOOLTIP_CARD_ELEMENT,
+    children,
+    originX,
+    originY,
+    padding,
+    placement,
+    radius,
+    scheme,
+    shadow,
+    style,
+    tone = 'inherit',
+    ...rest
+  } = props as TooltipCardProps<typeof DEFAULT_TOOLTIP_CARD_ELEMENT>
+
+  const rootStyle: CSSProperties = useMemo(
+    () => ({
       originX,
       originY,
-      padding,
-      placement,
-      radius,
-      scheme,
-      shadow,
-      style,
-      tone = 'inherit',
-      ...restProps
-    } = props
+      willChange: animate ? 'transform' : undefined,
+      ...style,
+    }),
+    [animate, originX, originY, style],
+  )
 
-    const rootStyle: CSSProperties = 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],
+  )
 
-    const arrowStyle: CSSProperties = useMemo(
-      () => ({
-        left: arrowX !== null ? arrowX : undefined,
-        top: arrowY !== null ? arrowY : undefined,
-        right: undefined,
-        bottom: undefined,
-      }),
-      [arrowX, arrowY],
-    )
+  return (
+    <MotionCard
+      data-ui="Tooltip__card"
+      {...rest}
+      as={as}
+      className={tooltipCard()}
+      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}
 
-    return (
-      <MotionCard
-        data-ui="Tooltip__card"
-        {...restProps}
-        data-animate={animate ? '' : undefined}
-        className={tooltipCard()}
-        data-placement={placement}
-        padding={padding}
-        radius={radius}
-        ref={ref}
-        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}
-          />
-        )}
-      </MotionCard>
-    )
-  }),
-)
+      {arrow && (
+        <Arrow
+          ref={arrowRef}
+          style={arrowStyle}
+          width={DEFAULT_TOOLTIP_ARROW_WIDTH}
+          height={DEFAULT_TOOLTIP_ARROW_HEIGHT}
+          radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
+        />
+      )}
+    </MotionCard>
+  )
+}
 
-TooltipCard.displayName = 'Memo(ForwardRef(TooltipCard))'
+TooltipCard.displayName = 'TooltipCard'

package/src/ui/primitives/types.ts

@@ -155,9 +155,7 @@ export interface ResponsiveWidthProps {
   width?: number | 'auto' | (number | 'auto')[]
 }
 
-/**
- * @public
- */
+/** @public */
 export type Delay =
   | number
   | Partial<{

package/src/ui/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/ui/types/badge.ts

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

package/src/ui/types/button.ts

@@ -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/ui/types/card.ts

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

package/src/ui/types/dialog.ts

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

package/src/ui/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/ui/utils/arrow/arrow.tsx

@@ -1,15 +1,37 @@
 import {_arrow, _arrowShape, _arrowStroke, _arrowStrokeMask} from '@sanity/ui/css'
-import {CSSProperties, ForwardedRef, forwardRef, ReactElement, useMemo} from 'react'
+import {CSSProperties, useMemo} from 'react'
 
-import {Props} from '../../types'
+import {ComponentType, Props} from '../../types'
 import {compileCommands, getRoundedCommands, 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
+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
 
@@ -31,11 +53,15 @@ 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,
+          '--arrow-size': `${w}px`,
+        } as CSSProperties
+      }
     >
       <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
         <mask id="stroke-mask">
@@ -44,8 +70,8 @@ export const Arrow = forwardRef(function Arrow(
         <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/ui/utils/boundaryElement/boundaryElementProvider.tsx

@@ -3,17 +3,13 @@ import {ReactElement, ReactNode, useMemo} from 'react'
 import {BoundaryElementContext} from './boundaryElementContext'
 import {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/ui/utils/boundaryElement/types.ts

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

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

@@ -9,9 +9,7 @@ const DEFAULT_VALUE: BoundaryElementContextValue = {
   element: null,
 }
 
-/**
- * @public
- */
+/** @public */
 export function useBoundaryElement(): BoundaryElementContextValue {
   const value = useContext(BoundaryElementContext)
 

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

@@ -1,30 +1,51 @@
 import {BREAKPOINTS} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, useImperativeHandle, useMemo, useState} from 'react'
+import {useImperativeHandle, useMemo, useState} from 'react'
 
 import {useElementSize} from '../../hooks'
-import {Props} from '../../types'
+import {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[]
 }
 
-const defaultBreakpoints = Object.values(BREAKPOINTS)
+/** @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 {children, media: mediaProp, ...restProps} = props
-  const breakpoints = mediaProp ?? defaultBreakpoints
+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)
@@ -47,9 +68,10 @@ export const ElementQuery = forwardRef(function ElementQuery(
   ])
 
   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/ui/utils/errorBoundary.tsx

@@ -25,6 +25,8 @@ export interface ErrorBoundaryState {
 export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   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}

package/src/ui/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'

package/src/ui/utils/layer/layer.tsx

@@ -1,112 +1,42 @@
-import {
-  FocusEvent,
-  ForwardedRef,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-} from 'react'
-
-import {EMPTY_RECORD} from '../../constants'
-import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
-import {Box, BoxProps} from '../../primitives'
+import {CardElementType, CardOwnProps} from '../../primitives'
 import {Props} from '../../types'
+import {LayerCard} from './layerCard'
 import {LayerProvider} from './layerProvider'
-import {useLayer} from './useLayer'
 
-/**
- * @public
- */
-export interface LayerProps extends BoxProps {
+/** @public */
+export const DEFAULT_LAYER_ELEMENT = 'div'
+
+/** @public */
+export type LayerOwnProps = CardOwnProps & {
   /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
   onActivate?: (props: {activeElement: HTMLElement | null}) => void
   zOffset?: number | number[]
 }
 
-interface LayerChildrenProps extends BoxProps {
-  onActivate?: LayerProps['onActivate']
-}
+/** @public */
+export type LayerElementType = CardElementType
 
-const LayerChildren = forwardRef(function LayerChildren(
-  props: Props<LayerChildrenProps, 'div'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
+/** @public */
+export type LayerProps<E extends LayerElementType = LayerElementType> = Props<LayerOwnProps, E>
+
+/** @public */
+export function Layer<E extends LayerElementType = typeof DEFAULT_LAYER_ELEMENT>(
+  props: LayerProps<E>,
 ) {
   const {
+    as = DEFAULT_LAYER_ELEMENT,
     children,
-    onActivate,
-    onFocus,
-    position = 'relative',
-    style = EMPTY_RECORD,
-    ...restProps
-  } = props
-  const {zIndex, isTopLayer} = useLayer()
-  const lastFocusedRef = useRef<HTMLElement | null>(null)
-  const ref = useRef<HTMLDivElement | null>(null)
-  const isTopLayerRef = useRef<boolean>(isTopLayer)
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
-  // When the layer very first mounts, it will be the top layer, but we don't want to fire
-  // the callback in that case. We use a ref to track the previous value of isTopLayer to
-  // determine if the layer has become the top layer since the last render.
-  useEffect(() => {
-    const becameTopLayer = isTopLayerRef.current !== isTopLayer && isTopLayer
-
-    if (becameTopLayer) {
-      onActivate?.({activeElement: lastFocusedRef.current})
-    }
-
-    isTopLayerRef.current = isTopLayer
-  }, [isTopLayer, onActivate])
-
-  const handleFocus = useCallback(
-    (event: FocusEvent<HTMLDivElement, Element>) => {
-      // Call the user-provided onFocus handler if any
-      onFocus?.(event)
-
-      const rootElement = ref.current
-      const target = document.activeElement
-
-      if (!isTopLayer || !rootElement || !target) return
-
-      if (isHTMLElement(target) && containsOrEqualsElement(rootElement, target)) {
-        lastFocusedRef.current = target
-      }
-    },
-    [isTopLayer, onFocus],
-  )
-
-  return (
-    <Box
-      data-ui="Layer"
-      {...restProps}
-      onFocus={handleFocus}
-      position={position}
-      ref={ref}
-      style={{...style, zIndex}}
-    >
-      {children}
-    </Box>
-  )
-})
-
-/**
- * @public
- */
-export const Layer = forwardRef(function Layer(
-  props: Props<LayerProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {children, zOffset = 1, ...restProps} = props
+    zOffset = 1,
+    ...rest
+  } = props as LayerProps<typeof DEFAULT_LAYER_ELEMENT>
 
   return (
     <LayerProvider zOffset={zOffset}>
-      <LayerChildren {...restProps} ref={ref}>
+      <LayerCard {...rest} as={as}>
         {children}
-      </LayerChildren>
+      </LayerCard>
     </LayerProvider>
   )
-})
+}
 
-Layer.displayName = 'ForwardRef(Layer)'
+Layer.displayName = 'Layer'