@sanity/ui 3.0.0-static.10 → 3.0.0-static.12

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

@@ -1,12 +1,12 @@
 import {Strategy} from '@floating-ui/react-dom'
 import {popoverCard} from '@sanity/ui/css'
-import {motion, MotionProps} from 'framer-motion'
-import {CSSProperties, ForwardedRef, forwardRef, memo, useMemo} from 'react'
+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, CardProps, CardProvider, useCard} from '../card'
+import {Card, CardElementType, CardOwnProps} from '../card'
 import {Flex} from '../flex'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
@@ -16,7 +16,10 @@ import {
 } from './constants'
 
 /** @internal */
-export interface PopoverCardProps extends CardProps {
+export const DEFAULT_POPOVER_CARD_ELEMENT = 'div'
+
+/** @internal */
+export type PopoverCardOwnProps = CardOwnProps & {
   /** @beta*/
   __unstable_margins?: PopoverMargins
   animate?: boolean
@@ -33,129 +36,128 @@ export interface PopoverCardProps extends CardProps {
   y: number | null
 }
 
+/** @internal */
+export type PopoverCardElementType = CardElementType
+
+/** @internal */
+export type PopoverCardProps<E extends PopoverCardElementType = PopoverCardElementType> = Props<
+  PopoverCardOwnProps,
+  E
+>
+
 const MotionCard = motion.create(Card)
 
-/**
- * @internal
- */
-export const PopoverCard = memo(
-  forwardRef(function PopoverCard(
-    props: Props<PopoverCardProps, 'div'>,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) {
-    const {
-      __unstable_margins: marginsProp,
-      animate,
-      arrow,
-      arrowRef,
-      arrowX,
-      arrowY,
-      children,
-      maxWidth,
-      padding,
-      placement,
-      originX,
-      originY,
-      overflow,
-      radius,
-      referenceWidth,
-      scheme,
-      shadow,
-      strategy,
-      style,
-      tone,
-      // width,
-      x: xProp,
-      y: yProp,
-      ...restProps
-    } = props
+/** @internal */
+export function PopoverCard<E extends PopoverCardElementType = typeof DEFAULT_POPOVER_CARD_ELEMENT>(
+  props: PopoverCardProps<E>,
+) {
+  const {
+    __unstable_margins: marginsProp,
+    animate,
+    arrow,
+    arrowRef,
+    arrowX,
+    arrowY,
+    as = DEFAULT_POPOVER_CARD_ELEMENT,
+    children,
+    maxWidth,
+    padding,
+    placement,
+    originX,
+    originY,
+    overflow,
+    radius,
+    referenceWidth,
+    shadow,
+    strategy,
+    style,
+    tone = 'inherit',
+    x: xProp,
+    y: yProp,
+    ...rest
+  } = props as PopoverCardProps<typeof DEFAULT_POPOVER_CARD_ELEMENT>
 
-    const card = useCard()
+  const layer = useLayer()
 
-    const layer = useLayer()
+  // Get margins: [top, right, bottom, left]
+  const margins: PopoverMargins = useMemo(
+    () => marginsProp || DEFAULT_POPOVER_MARGINS,
+    [marginsProp],
+  )
 
-    // Get margins: [top, right, bottom, left]
-    const margins: PopoverMargins = useMemo(
-      () => marginsProp || DEFAULT_POPOVER_MARGINS,
-      [marginsProp],
-    )
+  // Translate according to margins
+  const x = (xProp ?? 0) + margins[3]
+  const y = (yProp ?? 0) + margins[0]
 
-    // Translate according to margins
-    const x = (xProp ?? 0) + margins[3]
-    const y = (yProp ?? 0) + margins[0]
+  const rootStyle: CSSProperties = useMemo(
+    () => ({
+      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],
+  )
 
-    const rootStyle: CSSProperties = useMemo(
-      () => ({
-        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],
-    )
+  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
+      className={popoverCard()}
+      data-ui="Popover"
+      {...rest}
+      as={as}
+      data-context-tone={tone}
+      data-placement={placement}
+      direction="column"
+      display="flex"
+      radius={radius}
+      shadow={shadow}
+      sizing="border"
+      style={rootStyle}
+      tone={tone}
+      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}
+    >
+      <Flex
+        data-ui="Popover__wrapper"
+        direction="column"
+        flex={1}
+        maxWidth={maxWidth}
+        overflow={overflow}
+      >
+        <Flex direction="column" flex={1} padding={padding}>
+          {children}
+        </Flex>
+      </Flex>
 
-    return (
-      <CardProvider tone={card?.tone ?? 'transparent'} scheme={card?.scheme ?? 'light'}>
-        <MotionCard
-          className={popoverCard()}
-          data-ui="Popover"
-          {...(restProps as CardProps & MotionProps)}
-          data-context-tone={card?.tone ?? 'transparent'}
-          data-placement={placement}
-          direction="column"
-          display="flex"
-          radius={radius}
-          ref={ref}
-          scheme={scheme}
-          shadow={shadow}
-          sizing="border"
-          style={rootStyle}
-          tone={tone}
-          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}
-        >
-          <Flex
-            data-ui="Popover__wrapper"
-            direction="column"
-            flex={1}
-            maxWidth={maxWidth}
-            overflow={overflow}
-          >
-            <Flex direction="column" flex={1} padding={padding}>
-              {children}
-            </Flex>
-          </Flex>
+      {arrow && (
+        <Arrow
+          ref={arrowRef}
+          style={arrowStyle}
+          width={DEFAULT_POPOVER_ARROW_WIDTH}
+          height={DEFAULT_POPOVER_ARROW_HEIGHT}
+          radius={DEFAULT_POPOVER_ARROW_RADIUS}
+        />
+      )}
+    </MotionCard>
+  )
+}
 
-          {arrow && (
-            <Arrow
-              ref={arrowRef}
-              style={arrowStyle}
-              width={DEFAULT_POPOVER_ARROW_WIDTH}
-              height={DEFAULT_POPOVER_ARROW_HEIGHT}
-              radius={DEFAULT_POPOVER_ARROW_RADIUS}
-            />
-          )}
-        </MotionCard>
-      </CardProvider>
-    )
-  }),
-)
-PopoverCard.displayName = 'Memo(ForwardRef(PopoverCard))'
+PopoverCard.displayName = 'PopoverCard'

package/src/ui/primitives/radio/radio.tsx

@@ -1,26 +1,42 @@
 import {composeClassNames, radio} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
+import {useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks'
-import {Props} from '../../types'
+import {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface RadioProps {
+/** @public */
+export const DEFAULT_RADIO_ELEMENT = 'input'
+
+/** @public */
+export type RadioOwnProps = {
   customValidity?: string
 }
 
+/** @public */
+export type RadioElementType = 'input' | ComponentType
+
+/** @public */
+export type RadioProps<E extends RadioElementType = RadioElementType> = Props<RadioOwnProps, E>
+
 /**
  * The `Radio` component allows the user to select one option from a set.
  *
  * @public
  */
-export const Radio = forwardRef(function Radio(
-  props: Props<RadioProps, 'input'>,
-  forwardedRef: ForwardedRef<HTMLInputElement>,
+export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>(
+  props: RadioProps<E>,
 ) {
-  const {className, disabled, style, customValidity, readOnly, ...restProps} = props
+  const {
+    as: Element = DEFAULT_RADIO_ELEMENT,
+    className,
+    disabled,
+    style,
+    customValidity,
+    readOnly,
+    ref: forwardedRef,
+    ...rest
+  } = props as RadioProps<typeof DEFAULT_RADIO_ELEMENT>
+
   const ref = useRef<HTMLInputElement | null>(null)
 
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
@@ -32,10 +48,10 @@ export const Radio = forwardRef(function Radio(
 
   return (
     <div className={composeClassNames(className, radio())} data-ui="Radio" style={style}>
-      <input
+      <Element
         data-read-only={!disabled && readOnly ? '' : undefined}
         data-error={customValidity ? '' : undefined}
-        {...restProps}
+        {...rest}
         disabled={disabled || readOnly}
         readOnly={readOnly}
         ref={ref}
@@ -44,6 +60,6 @@ export const Radio = forwardRef(function Radio(
       <span />
     </div>
   )
-})
+}
 
-Radio.displayName = 'ForwardRef(Radio)'
+Radio.displayName = 'Radio'

package/src/ui/primitives/select/select.tsx

@@ -7,33 +7,40 @@ import {
   SelectStyleProps,
 } from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
+import {useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks'
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'
 
-/**
- * @public
- */
-export interface SelectProps extends SelectStyleProps {
+/** @public */
+export const DEFAULT_SELECT_ELEMENT = 'select'
+
+/** @public */
+export type SelectOwnProps = SelectStyleProps & {
   customValidity?: string
   readOnly?: boolean
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
 
+/** @public */
+export type SelectElementType = 'select' | ComponentType
+
+/** @public */
+export type SelectProps<E extends SelectElementType = SelectElementType> = Props<SelectOwnProps, E>
+
 /**
  * The `Select` component provides control of options.
  *
  * @public
  */
-export const Select = forwardRef(function Select(
-  props: Props<SelectProps, 'select'>,
-  forwardedRef: ForwardedRef<HTMLSelectElement>,
+export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(
+  props: SelectProps<E>,
 ) {
   const {
+    as: Element = DEFAULT_SELECT_ELEMENT,
     border = true,
     children,
     customValidity,
@@ -43,9 +50,10 @@ export const Select = forwardRef(function Select(
     padding = 3,
     radius = 1,
     readOnly,
+    ref: forwardedRef,
     space = 2,
-    ...restProps
-  } = props
+    ...rest
+  } = props as SelectProps<typeof DEFAULT_SELECT_ELEMENT>
 
   const ref = useRef<HTMLSelectElement | null>(null)
 
@@ -62,15 +70,15 @@ export const Select = forwardRef(function Select(
       className={select({border, fontSize, padding, radius, gap: gap ?? space})}
       data-icon-right=""
     >
-      <select
+      <Element
         data-read-only={!disabled && readOnly ? '' : undefined}
-        {...restProps}
+        {...rest}
         className={_inputElement()}
         disabled={disabled || readOnly}
         ref={ref}
       >
         {children}
-      </select>
+      </Element>
       <span className={selectPresentation()}>
         <Box as="span" display="inline-block" padding={padding}>
           <Text size={fontSize}>
@@ -80,6 +88,6 @@ export const Select = forwardRef(function Select(
       </span>
     </div>
   )
-})
+}
 
-Select.displayName = 'ForwardRef(Select)'
+Select.displayName = 'Select'

package/src/ui/primitives/spinner/animatedSpinnerIcon.tsx

@@ -4,13 +4,15 @@ import {ReactElement, SVGProps} from 'react'
 
 /** @internal */
 export function AnimatedSpinnerIcon(props: SVGProps<SVGSVGElement>): ReactElement {
-  const {className, ...restProps} = props
+  const {className, ...rest} = props
 
   return (
     <SpinnerIcon
-      {...restProps}
+      {...rest}
       data-sanity-icon="animated-spinner"
       className={composeClassNames(className, animatedSpinnerIcon())}
     />
   )
 }
+
+AnimatedSpinnerIcon.displayName = 'AnimatedSpinnerIcon'

package/src/ui/primitives/spinner/spinner.tsx

@@ -1,33 +1,45 @@
 import {ResponsiveProp, spinner} from '@sanity/ui/css'
 import {FontTextSize} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef} from 'react'
 
-import {Props} from '../../types'
+import {ComponentType, Props} from '../../types'
 import {Text} from '../text'
 import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
 
-/**
- * @public
- */
-export interface SpinnerProps {
+/** @public */
+export const DEFAULT_SPINNER_ELEMENT = 'div'
+
+/** @public */
+export type SpinnerOwnProps = {
   muted?: boolean
   size?: ResponsiveProp<FontTextSize>
 }
 
+/** @public */
+export type SpinnerElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Props<
+  SpinnerOwnProps,
+  E
+>
+
 /**
  * Indicate that something is loading for an indeterminate amount of time.
  *
  * @public
  */
-export const Spinner = forwardRef(function Spinner(
-  props: Props<SpinnerProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Spinner<E extends SpinnerElementType = typeof DEFAULT_SPINNER_ELEMENT>(
+  props: SpinnerProps<E>,
 ) {
+  const {as = DEFAULT_SPINNER_ELEMENT, ...rest} = props as SpinnerProps<
+    typeof DEFAULT_SPINNER_ELEMENT
+  >
+
   return (
-    <Text data-ui="Spinner" {...props} className={spinner()} ref={ref}>
+    <Text as={as} data-ui="Spinner" {...rest} className={spinner()}>
       <AnimatedSpinnerIcon />
     </Text>
   )
-})
+}
 
-Spinner.displayName = 'ForwardRef(Spinner)'
+Spinner.displayName = 'Spinner'

package/src/ui/primitives/stack/stack.tsx

@@ -1,45 +1,54 @@
 import {composeClassNames, ResponsiveProp, stack} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef} from 'react'
 
 import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+import {Box, BoxElementType, BoxOwnProps} from '../box'
 
-/**
- * @public
- */
-export interface StackProps
-  extends Omit<
-    BoxProps,
-    'align' | 'columns' | 'direction' | 'display' | 'gapX' | 'gapY' | 'justify'
-  > {
+/** @public */
+export const DEFAULT_STACK_ELEMENT = 'div'
+
+/** @public */
+export type StackOwnProps = Omit<
+  BoxOwnProps,
+  'align' | 'columns' | 'direction' | 'display' | 'gapX' | 'gapY' | 'justify'
+> & {
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
 
+/** @public */
+export type StackElementType = BoxElementType
+
+/** @public */
+export type StackProps<E extends StackElementType = StackElementType> = Props<StackOwnProps, E>
+
 /**
  * The `Stack` component is used to place elements on top of each other.
  *
  * @public
  */
-export const Stack = forwardRef(function Stack(
-  props: Props<StackProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>(
+  props: StackProps<E>,
 ) {
-  const {as, className, gap, space, ...restProps} = props
+  const {
+    as = DEFAULT_STACK_ELEMENT,
+    className,
+    gap,
+    space,
+    ...rest
+  } = props as StackProps<typeof DEFAULT_STACK_ELEMENT>
 
   return (
     <Box
       data-ui="Stack"
-      {...restProps}
+      {...rest}
       as={as}
       autoRows="min"
       className={composeClassNames(className, stack())}
       display="grid"
       gap={gap ?? space}
-      ref={ref}
     />
   )
-})
+}
 
-Stack.displayName = 'ForwardRef(Stack)'
+Stack.displayName = 'Stack'

package/src/ui/primitives/switch/switch.tsx

@@ -6,18 +6,25 @@ import {
   _switchTrack,
   composeClassNames,
 } from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
+import {useEffect, useImperativeHandle, useRef} from 'react'
 
-import {Props} from '../../types'
+import {ComponentType, Props} from '../../types'
 import {Box} from '../box'
 
-/**
- * @public
- */
-export interface SwitchProps {
+/** @public */
+export const DEFAULT_SWITCH_ELEMENT = 'input'
+
+/** @public */
+export type SwitchOwnProps = {
   indeterminate?: boolean
 }
 
+/** @public */
+export type SwitchElementType = 'input' | ComponentType
+
+/** @public */
+export type SwitchProps<E extends SwitchElementType = SwitchElementType> = Props<SwitchOwnProps, E>
+
 /**
  * The `Switch` component allows the user to toggle a setting on and off.
  *
@@ -25,11 +32,21 @@ export interface SwitchProps {
  *
  * @public
  */
-export const Switch = forwardRef(function Switch(
-  props: Props<SwitchProps, 'input'>,
-  forwardedRef: ForwardedRef<HTMLInputElement>,
+export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEMENT>(
+  props: SwitchProps<E>,
 ) {
-  const {checked, className, disabled, indeterminate, readOnly, style, ...restProps} = props
+  const {
+    as: Element = DEFAULT_SWITCH_ELEMENT,
+    checked,
+    className,
+    disabled,
+    indeterminate,
+    readOnly,
+    ref: forwardedRef,
+    style,
+    ...rest
+  } = props as SwitchProps<typeof DEFAULT_SWITCH_ELEMENT>
+
   const ref = useRef<HTMLInputElement | null>(null)
 
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
@@ -54,8 +71,8 @@ export const Switch = forwardRef(function Switch(
       position="relative"
       style={style}
     >
-      <input
-        {...restProps}
+      <Element
+        {...rest}
         checked={indeterminate !== true && checked}
         className={_switchElement()}
         data-disabled={disabled ? '' : undefined}
@@ -70,6 +87,6 @@ export const Switch = forwardRef(function Switch(
       </span>
     </Box>
   )
-})
+}
 
-Switch.displayName = 'ForwardRef(Switch)'
+Switch.displayName = 'Switch'