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

package/src/core/primitives/popover/popoverLayer.tsx

@@ -0,0 +1,147 @@
+import type {Strategy} from '@floating-ui/react-dom'
+import {popoverCard} from '@sanity/ui/css'
+import {motion} from 'framer-motion'
+import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
+
+import {POPOVER_MOTION_PROPS} from '../../constants'
+import type {Placement, PopoverMargins} from '../../types'
+import {Arrow, Layer, type LayerOwnProps, type LayerProps} from '../../utils'
+import {Flex} from '../flex'
+import {
+  DEFAULT_POPOVER_ARROW_HEIGHT,
+  DEFAULT_POPOVER_ARROW_RADIUS,
+  DEFAULT_POPOVER_ARROW_WIDTH,
+  DEFAULT_POPOVER_MARGINS,
+} from './constants'
+
+/** @internal */
+export const DEFAULT_POPOVER_LAYER_ELEMENT = 'div'
+
+/** @internal */
+export type PopoverLayerOwnProps = LayerOwnProps & {
+  /** @beta*/
+  __unstable_margins?: PopoverMargins
+  animate?: boolean
+  arrow: boolean
+  arrowRef: ForwardedRef<HTMLDivElement>
+  arrowX?: number
+  arrowY?: number
+  originX?: number
+  originY?: number
+  placement: Placement
+  referenceWidth?: number
+  strategy: Strategy
+  x: number | null
+  y: number | null
+}
+
+/** @internal */
+export type PopoverLayerProps = PopoverLayerOwnProps & LayerProps<'div'>
+
+/** @internal */
+export function PopoverLayer(props: PopoverLayerProps) {
+  const {
+    __unstable_margins: marginsProp,
+    animate,
+    arrow,
+    arrowRef,
+    arrowX,
+    arrowY,
+    children,
+    maxWidth,
+    padding,
+    placement,
+    originX,
+    originY,
+    overflow,
+    radius,
+    referenceWidth,
+    shadow,
+    strategy,
+    style,
+    tone = 'inherit',
+    x: xProp,
+    y: yProp,
+    ...rest
+  } = props
+
+  // 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]
+
+  const rootStyle: CSSProperties = useMemo(
+    () => ({
+      left: x,
+      originX,
+      originY,
+      top: y,
+      width: referenceWidth,
+      willChange: animate ? 'transform' : undefined,
+      ...style,
+    }),
+    [animate, originX, originY, referenceWidth, style, x, y],
+  )
+
+  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
+      className={popoverCard()}
+      data-ui="Popover"
+      {...rest}
+      as={motion.div}
+      data-context-tone={tone}
+      data-placement={placement}
+      flexDirection="column"
+      display="flex"
+      position={strategy}
+      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>
+
+      {arrow && (
+        <Arrow
+          ref={arrowRef}
+          style={arrowStyle}
+          width={DEFAULT_POPOVER_ARROW_WIDTH}
+          height={DEFAULT_POPOVER_ARROW_HEIGHT}
+          radius={DEFAULT_POPOVER_ARROW_RADIUS}
+        />
+      )}
+    </Layer>
+  )
+}

package/src/core/primitives/popover/types.ts

@@ -1,6 +1,7 @@
+import type {ContainerWidth} from '@sanity/ui/theme'
+
 /** @beta */
 export type PopoverUpdateCallback = () => void
 
 /** @public */
-// todo: remove `auto` from PopoverWidth
-export type PopoverWidth = number | 'auto'
+export type PopoverWidth = Exclude<ContainerWidth, 'auto'>

package/src/core/primitives/radio/__workshop__/example.tsx

@@ -4,8 +4,8 @@ import {useCallback, useState} from 'react'
 
 export default function ExampleStory() {
   const [value, setValue] = useState('first-option')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
+  const disabled = useBoolean('Disabled', false)
+  const readOnly = useBoolean('Read only', false)
 
   const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value)
@@ -14,7 +14,7 @@ export default function ExampleStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[3, 4, 5]} sizing="border">
       <Container width={0}>
-        <Stack space={3}>
+        <Stack gap={3}>
           <Flex align="center" as="label">
             <Radio
               checked={value === 'first-option'}

package/src/core/primitives/radio/__workshop__/plain.tsx

@@ -2,14 +2,14 @@ import {Flex, Radio} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
 export default function PlainStory() {
-  const checked = useBoolean('Checked', false, 'Props')
-  const disabled = useBoolean('Disabled', false, 'Props')
+  const checked = useBoolean('Checked', false)
+  const disabled = useBoolean('Disabled', false)
   const id = 'radioStory'
   const name = 'radioStory'
   const onBlur = useAction('onBlur')
   const onChange = useAction('onChange')
   const onFocus = useAction('onFocus')
-  const readOnly = useBoolean('Read only', false, 'Props')
+  const readOnly = useBoolean('Read only', false)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[3, 4, 5]} sizing="border">

package/src/core/primitives/radio/radio.tsx

@@ -1,26 +1,42 @@
-import {composeClassNames, radio} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
+import {radio, radioInput, radioPresentation} from '@sanity/ui/css'
+import {useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks'
-import {Props} from '../../types'
+import type {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>(
@@ -31,19 +47,18 @@ export const Radio = forwardRef(function Radio(
   useCustomValidity(ref, customValidity)
 
   return (
-    <div className={composeClassNames(className, radio())} data-ui="Radio" style={style}>
-      <input
+    <div className={radio({className})} data-ui="Radio" style={style}>
+      <Element
+        {...rest}
+        className={radioInput()}
+        data-invalid={customValidity ? '' : undefined}
         data-read-only={!disabled && readOnly ? '' : undefined}
-        data-error={customValidity ? '' : undefined}
-        {...restProps}
         disabled={disabled || readOnly}
         readOnly={readOnly}
         ref={ref}
         type="radio"
       />
-      <span />
+      <span className={radioPresentation()} />
     </div>
   )
-})
-
-Radio.displayName = 'ForwardRef(Radio)'
+}

package/src/core/primitives/select/__workshop__/plain.tsx

@@ -1,22 +1,31 @@
 import {Card, Container, Label, Select, Stack} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_RADIUS_OPTIONS, WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
 
 export default function PlainStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
+  const border = useBoolean('Border', true)
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS)
+  const readOnly = useBoolean('Read only', false)
 
   return (
     <Container width={0}>
       <Card padding={4}>
-        <Stack space={3}>
+        <Stack gap={3}>
           <Label as="label" htmlFor="select">
             Select
           </Label>
 
-          <Select disabled={disabled} fontSize={fontSize} id="select-example" readOnly={readOnly}>
+          <Select
+            border={border}
+            disabled={disabled}
+            fontSize={fontSize}
+            id="select-example"
+            radius={radius}
+            readOnly={readOnly}
+          >
             <option value="a">Option A</option>
             <option value="b">Option B</option>
             <option value="c">Option C</option>

package/src/core/primitives/select/__workshop__/readOnly.tsx

@@ -4,7 +4,7 @@ export default function ReadOnlyStory() {
   return (
     <Container width={0}>
       <Card padding={4}>
-        <Stack space={3}>
+        <Stack gap={3}>
           <Label as="label" htmlFor="select">
             Select
           </Label>

package/src/core/primitives/select/select.tsx

@@ -1,51 +1,59 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {
   _inputElement,
-  ResponsiveProp,
+  type ResponsiveProp,
   select,
   selectPresentation,
-  SelectStyleProps,
+  type SelectStyleProps,
 } from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
+import type {Space} from '@sanity/ui/theme'
+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,
     disabled,
-    fontSize = 1,
+    fontSize = 2,
     gap,
-    padding = 2,
-    radius = 2,
+    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,9 @@ export const Select = forwardRef(function Select(
       className={select({border, fontSize, padding, radius, gap: gap ?? space})}
       data-icon-right=""
     >
-      <select
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        {...restProps}
-        className={_inputElement()}
-        disabled={disabled || readOnly}
-        ref={ref}
-      >
+      <Element {...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 +82,4 @@ export const Select = forwardRef(function Select(
       </span>
     </div>
   )
-})
-
-Select.displayName = 'ForwardRef(Select)'
+}

package/src/core/primitives/spinner/__workshop__/Props.tsx

@@ -1,16 +1,15 @@
 import {Flex, Spinner} from '@sanity/ui'
-import {FontTextSize} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
 
 export default function Props() {
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const muted = useBoolean('Muted', false)
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Spinner muted={muted} size={size as FontTextSize} />
+      <Spinner muted={muted} size={size} />
     </Flex>
   )
 }

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

@@ -1,16 +1,14 @@
 import {SpinnerIcon} from '@sanity/icons'
-import {animatedSpinnerIcon, composeClassNames} from '@sanity/ui/css'
-import {ReactElement, SVGProps} from 'react'
+import {animatedSpinnerIcon} from '@sanity/ui/css'
+import type {ReactElement, SVGProps} from 'react'
 
 /** @internal */
-export function AnimatedSpinnerIcon(props: SVGProps<SVGSVGElement>): ReactElement {
-  const {className, ...restProps} = props
+export function AnimatedSpinnerIcon(
+  props: Omit<SVGProps<SVGSVGElement>, 'className'>,
+): ReactElement {
+  const {...rest} = props
 
   return (
-    <SpinnerIcon
-      {...restProps}
-      data-sanity-icon="animated-spinner"
-      className={composeClassNames(className, animatedSpinnerIcon())}
-    />
+    <SpinnerIcon data-sanity-icon="animated-spinner" {...rest} className={animatedSpinnerIcon()} />
   )
 }

package/src/core/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 {type ResponsiveProp, spinner} from '@sanity/ui/css'
+import type {FontTextSize} from '@sanity/ui/theme'
 
-import {Props} from '../../types'
+import type {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,
+    className,
+    ...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({className})}>
       <AnimatedSpinnerIcon />
     </Text>
   )
-})
-
-Spinner.displayName = 'ForwardRef(Spinner)'
+}

package/src/core/primitives/stack/__workshop__/plain.tsx

@@ -1,13 +1,13 @@
 import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_SPACE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
 export default function PlainStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Stack space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}>
+        <Stack gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0)}>
           <Card padding={[2, 3, 4]} shadow={1}>
             <Text align="center" muted>
               Stack item

package/src/core/primitives/stack/stack.tsx

@@ -1,40 +1,64 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef} from 'react'
+import {type ResponsiveProp, stack} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
 
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
-/**
- * @public
- */
-export interface StackProps extends Omit<BoxProps, 'direction' | 'display' | 'gapX' | 'gapY'> {
+/** @public */
+export const DEFAULT_STACK_ELEMENT = 'div'
+
+/** @public */
+export type StackOwnProps = Omit<
+  BoxOwnProps,
+  | 'align'
+  | 'alignItems'
+  | 'columns'
+  | 'gridTemplateColumns'
+  | 'direction'
+  | 'display'
+  | 'flexDirection'
+  | 'gapX'
+  | 'gapY'
+  | 'justify'
+  | 'justifyContent'
+  | 'rows'
+  | 'gridTemplateRows'
+> & {
   /** @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, 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}
-      direction="column"
-      display="flex"
+      gridAutoRows="min"
+      className={stack({className})}
+      display="grid"
       gap={gap ?? space}
-      ref={ref}
     />
   )
-})
-
-Stack.displayName = 'ForwardRef(Stack)'
+}