@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -0,0 +1,149 @@
+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} from '../../types'
+import {Arrow} from '../arrow/arrow'
+import {Flex} from '../flex/flex'
+import {Layer, type LayerOwnProps, type LayerProps} from '../layer/layer'
+import {
+  DEFAULT_POPOVER_ARROW_HEIGHT,
+  DEFAULT_POPOVER_ARROW_RADIUS,
+  DEFAULT_POPOVER_ARROW_WIDTH,
+  DEFAULT_POPOVER_MARGINS,
+} from './constants'
+import type {PopoverMargins} from './types'
+
+/** @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): React.JSX.Element {
+  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,12 @@
+import type {ContainerWidth} from '@sanity/ui/theme'
+
+/**
+ * @beta
+ */
+export type PopoverMargins = [number, number, number, number]
+
 /** @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

@@ -2,10 +2,10 @@ import {Box, Container, Flex, Radio, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 
-export default function ExampleStory() {
+export default function ExampleStory(): React.JSX.Element {
   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__/index.ts

@@ -1,11 +1,13 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/radio',
   title: 'Radio',
   stories: [
     {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
     {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
   ],
-})
+}
+
+export default scope

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

@@ -1,15 +1,15 @@
 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')
+export default function PlainStory(): React.JSX.Element {
+  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,29 +1,42 @@
-import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
+import {radio, radioInput, radioPresentation} from '@sanity/ui/css'
+import {useImperativeHandle, useRef} from 'react'
 
-import {useCustomValidity} from '../../hooks'
-import {inputElementStyle, radioBaseStyle} from './styles'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface RadioProps {
+/** @public */
+export const DEFAULT_RADIO_ELEMENT = 'input'
+
+/** @public */
+export type RadioOwnProps = {
   customValidity?: string
 }
 
-const StyledRadio = styled.div(radioBaseStyle)
-const Input = styled.input(inputElementStyle)
+/** @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: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & RadioProps,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
-) {
-  const {className, disabled, style, customValidity, readOnly, ...restProps} = props
+export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>(
+  props: RadioProps<E>,
+): React.JSX.Element {
+  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>(
@@ -34,18 +47,18 @@ export const Radio = forwardRef(function Radio(
   useCustomValidity(ref, customValidity)
 
   return (
-    <StyledRadio className={className} 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 />
-    </StyledRadio>
+      <span className={radioPresentation()} />
+    </div>
   )
-})
-Radio.displayName = 'ForwardRef(Radio)'
+}

package/src/core/primitives/select/__workshop__/index.ts

@@ -1,11 +1,13 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/select',
   title: 'Select',
   stories: [
     {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
     {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
   ],
-})
+}
+
+export default scope

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

@@ -1,19 +1,31 @@
 import {Card, Container, Label, Select, Stack} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-export default function PlainStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
+import {WORKSHOP_RADIUS_OPTIONS, WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
+
+export default function PlainStory(): React.JSX.Element {
+  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} 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

@@ -1,10 +1,10 @@
 import {Card, Container, Label, Select, Stack} from '@sanity/ui'
 
-export default function ReadOnlyStory() {
+export default function ReadOnlyStory(): React.JSX.Element {
   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,55 +1,49 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
+import {_inputElement, select, selectPresentation, type SelectStyleProps} from '@sanity/ui/css'
+import {useImperativeHandle, useRef} from 'react'
 
-import {useArrayProp, useCustomValidity} from '../../hooks'
-import {Radius} from '../../types'
-import {Box} from '../box'
-import {Text} from '../text'
-import {selectStyle} from './styles'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import type {ComponentType, Props} from '../../types'
+import {Box} from '../box/box'
+import {Text} from '../text/text'
 
-/**
- * @public
- */
-export interface SelectProps {
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-  space?: number | number[]
+/** @public */
+export const DEFAULT_SELECT_ELEMENT = 'select'
+
+/** @public */
+export type SelectOwnProps = SelectStyleProps & {
   customValidity?: string
+  readOnly?: boolean
 }
 
-const StyledSelect = styled.div(selectStyle.root)
+/** @public */
+export type SelectElementType = 'select' | ComponentType
 
-const Input = styled.select<{
-  $fontSize: number[]
-  $padding: number[]
-  $radius: Radius[]
-  $space: number[]
-}>(selectStyle.input)
-
-const IconBox = styled(Box)(selectStyle.iconBox)
+/** @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: SelectProps & Omit<React.HTMLProps<HTMLSelectElement>, 'as'>,
-  forwardedRef: React.ForwardedRef<HTMLSelectElement>,
-) {
+export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(
+  props: SelectProps<E>,
+): React.JSX.Element {
   const {
+    as: Element = DEFAULT_SELECT_ELEMENT,
+    border = true,
     children,
     customValidity,
     disabled,
     fontSize = 2,
+    gap = 2,
     padding = 3,
-    radius = 2,
+    radius = 1,
     readOnly,
-    space = 3,
-    ...restProps
-  } = props
+    ref: forwardedRef,
+    ...rest
+  } = props as SelectProps<typeof DEFAULT_SELECT_ELEMENT>
 
   const ref = useRef<HTMLSelectElement | null>(null)
 
@@ -61,27 +55,21 @@ export const Select = forwardRef(function Select(
   useCustomValidity(ref, customValidity)
 
   return (
-    <StyledSelect data-ui="Select">
-      <Input
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        data-ui="Select"
-        {...restProps}
-        $fontSize={useArrayProp(fontSize)}
-        $padding={useArrayProp(padding)}
-        $radius={useArrayProp(radius)}
-        $space={useArrayProp(space)}
-        disabled={disabled || readOnly}
-        ref={ref}
-      >
+    <div
+      data-ui="Select"
+      className={select({border, fontSize, gap, padding, radius})}
+      data-icon-right=""
+    >
+      <Element {...rest} className={_inputElement()} disabled={disabled || readOnly} ref={ref}>
         {children}
-      </Input>
-
-      <IconBox padding={padding}>
-        <Text size={fontSize}>
-          <ChevronDownIcon />
-        </Text>
-      </IconBox>
-    </StyledSelect>
+      </Element>
+      <span className={selectPresentation()}>
+        <Box as="span" display="inline-block" padding={padding}>
+          <Text size={fontSize}>
+            <ChevronDownIcon />
+          </Text>
+        </Box>
+      </span>
+    </div>
   )
-})
-Select.displayName = 'ForwardRef(Select)'
+}

package/src/core/primitives/selectable/selectable.tsx

@@ -0,0 +1,50 @@
+import {_selectable, type SelectableStyleProps} from '@sanity/ui/css'
+import type {ElementTone} from '@sanity/ui/theme'
+
+import type {ComponentType, Props} from '../../types'
+import {Box, type BoxOwnProps} from '../box/box'
+
+/** @internal */
+export const DEFAULT_SELECTABLE_ELEMENT = 'button'
+
+/** @internal */
+export type SelectableOwnProps = BoxOwnProps &
+  SelectableStyleProps & {
+    disabled?: boolean
+    href?: string
+    selected?: boolean
+    tone?: ElementTone
+    type?: 'button'
+  }
+
+/** @internal */
+export type SelectableElementType = 'button' | 'a' | ComponentType
+
+/** @internal */
+export type SelectableProps<E extends SelectableElementType = SelectableElementType> = Props<
+  SelectableOwnProps,
+  E
+>
+
+/** @internal */
+export function Selectable<E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT>(
+  props: SelectableProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_SELECTABLE_ELEMENT,
+    className,
+    radius,
+    selected,
+    tone,
+    ...rest
+  } = props as SelectableProps<typeof DEFAULT_SELECTABLE_ELEMENT>
+
+  return (
+    <Box
+      {...rest}
+      as={as}
+      className={_selectable({className, radius, tone})}
+      data-selected={selected ? '' : undefined}
+    />
+  )
+}

package/src/core/{components → primitives}/skeleton/__workshop__/delay.tsx

@@ -13,10 +13,10 @@ import {
 } from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
-export default function SkeletonDelayStory() {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
+export default function SkeletonDelayStory(): React.JSX.Element {
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
   const animated = useBoolean('Animated', true)
 
   return (
@@ -32,7 +32,7 @@ export default function SkeletonDelayStory() {
               marginRight={3}
               delay={1000}
             />
-            <Stack space={2} flex={1}>
+            <Stack flex={1} gap={2}>
               <HeadingSkeleton
                 size={4}
                 style={{width: '100%'}}

package/src/core/{components → primitives}/skeleton/__workshop__/index.ts

@@ -1,11 +1,13 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
-  name: 'components/skeleton',
+const scope: WorkshopScope = {
+  name: 'primitives/skeleton',
   title: 'Skeleton',
   stories: [
     {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},
     {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./delay'))},
   ],
-})
+}
+
+export default scope

package/src/core/{components → primitives}/skeleton/__workshop__/skeleton.tsx

@@ -13,26 +13,26 @@ import {
 } from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
-export default function SkeletonStory() {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
+export default function SkeletonStory(): React.JSX.Element {
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
   const animated = useBoolean('Animated', true)
 
   return (
     <Box padding={[4, 5, 6]}>
       <Container width={1}>
-        <Stack space={4}>
+        <Stack gap={4}>
           {[1, 2, 3].map((item) => (
             <Card key={item} tone={tone} padding={2} radius={2} border>
               <Flex align="center">
-                <Grid gap={2} columns={2} marginRight={3}>
+                <Grid gap={2} gridTemplateColumns={2} marginRight={3}>
                   <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
                   <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
                   <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
                   <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
                 </Grid>
-                <Stack space={2} flex={1}>
+                <Stack gap={2} flex={1}>
                   <HeadingSkeleton style={{width: '100%'}} radius={1} animated={animated} />
                   <TextSkeleton style={{width: '100%'}} radius={1} animated={animated} />
                   <LabelSkeleton style={{width: '100%'}} radius={1} animated={animated} />