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

package/src/ui/primitives/box/box.tsx

@@ -1,23 +1,50 @@
-import {
-  box,
+import type {
   BoxStyleProps,
-  composeClassNames,
   GapStyleProps,
   InsetStyleProps,
   PositionStyleProps,
 } from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
+import {box, composeClassNames} from '@sanity/ui/css'
 
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface BoxProps
-  extends BoxStyleProps,
-    GapStyleProps,
-    InsetStyleProps,
-    PositionStyleProps {}
+/** @public */
+export const DEFAULT_BOX_ELEMENT = 'div'
+
+/** @public */
+export type BoxOwnProps = BoxStyleProps & GapStyleProps & InsetStyleProps & PositionStyleProps
+
+/** @public */
+export type BoxElementType =
+  | 'a'
+  | 'article'
+  | 'aside'
+  | 'blockquote'
+  | 'button'
+  | 'details'
+  | 'div'
+  | 'header'
+  | 'fieldset'
+  | 'figure'
+  | 'figcaption'
+  | 'footer'
+  | 'form'
+  | 'kbd'
+  | 'label'
+  | 'legend'
+  | 'li'
+  | 'main'
+  | 'nav'
+  | 'ol'
+  | 'pre'
+  | 'section'
+  | 'span'
+  | 'summary'
+  | 'ul'
+  | ComponentType
+
+/** @public */
+export type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, E>
 
 /**
  * The `Box` component is a basic layout wrapper component which provides utility properties
@@ -25,13 +52,10 @@ export interface BoxProps
  *
  * @public
  */
-export const Box = forwardRef(function Box(
-  props: Props<BoxProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
+export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props: BoxProps<E>) {
   const {
     align,
-    as: As = 'div',
+    as: Element = DEFAULT_BOX_ELEMENT,
     autoCols,
     autoFlow,
     autoRows,
@@ -41,6 +65,7 @@ export const Box = forwardRef(function Box(
     borderBottom,
     borderLeft,
     className,
+    children,
     column,
     columnStart,
     columnEnd,
@@ -67,7 +92,11 @@ export const Box = forwardRef(function Box(
     marginLeft,
     maxWidth,
     minWidth = 0,
+    muted,
+    outline,
     overflow,
+    overflowX,
+    overflowY,
     padding = 0,
     paddingX,
     paddingY,
@@ -77,7 +106,6 @@ export const Box = forwardRef(function Box(
     paddingLeft,
     pointerEvents,
     position,
-    muted,
     radius,
     row,
     rows,
@@ -86,13 +114,13 @@ export const Box = forwardRef(function Box(
     sizing = 'border',
     width,
     wrap,
-    ...restProps
-  } = props
+    ...rest
+  } = props as BoxProps<typeof DEFAULT_BOX_ELEMENT>
 
   return (
-    <As
+    <Element
       data-ui="Box"
-      {...restProps}
+      {...rest}
       className={composeClassNames(
         className,
         box({
@@ -122,7 +150,6 @@ export const Box = forwardRef(function Box(
           insetRight,
           insetTop,
           justify,
-          overflow,
           margin,
           marginX,
           marginY,
@@ -133,6 +160,10 @@ export const Box = forwardRef(function Box(
           maxWidth,
           minWidth,
           muted,
+          outline,
+          overflow,
+          overflowX,
+          overflowY,
           padding,
           paddingX,
           paddingY,
@@ -152,11 +183,10 @@ export const Box = forwardRef(function Box(
           wrap,
         }),
       )}
-      ref={ref}
     >
-      {props.children}
-    </As>
+      {children}
+    </Element>
   )
-})
+}
 
-Box.displayName = 'ForwardRef(Box)'
+Box.displayName = 'Box'

package/src/ui/primitives/button/__workshop__/sanityUploadButton.tsx

@@ -18,7 +18,7 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
     width: stretch;
   }
 
-  & span:nth-child(2) {
+  & > span:nth-child(2) {
     width: 0;
     flex: none;
     padding: 0;
@@ -27,8 +27,8 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
 
 export default function SanityUploadButtonWorkaroundStory() {
   return (
-    <Flex align="center" height="fill" htmlFor="file" justify="center">
-      <SanityUploadButton icon={UploadIcon} tabIndex={0} text="Upload">
+    <Flex align="center" height="fill" justify="center">
+      <SanityUploadButton htmlFor="file" icon={UploadIcon} tabIndex={0} text="Upload">
         <input type="file" />
       </SanityUploadButton>
     </Flex>

package/src/ui/primitives/button/__workshop__/uploadButton.tsx

@@ -11,9 +11,10 @@ export default function UploadButtonStory() {
   }, [])
 
   return (
-    <Flex align="center" height="fill" htmlFor="file" justify="center">
+    <Flex align="center" height="fill" justify="center">
       <Button
         as="label"
+        htmlFor="file"
         onKeyDown={handleKeyDown}
         tabIndex={0}
         text={

package/src/ui/primitives/button/button.test.tsx

@@ -5,7 +5,7 @@ import {screen} from '@testing-library/react'
 import {axe} from 'jest-axe'
 
 import {render} from '../../../../test'
-import {Button, ButtonProps} from './button'
+import {Button} from './button'
 
 describe('atoms/button', () => {
   it('Axe: should have no violations', async () => {
@@ -27,18 +27,4 @@ describe('atoms/button', () => {
 
     expect(screen.getByText('Button text')).toBeInTheDocument()
   })
-
-  it('should wrap button', () => {
-    function WrappedButton({button: buttonProps}: {button: ButtonProps}) {
-      return <Button {...buttonProps} />
-    }
-
-    const buttonProps: ButtonProps = {
-      text: 'Button text',
-    }
-
-    render(<WrappedButton button={buttonProps} />)
-
-    expect(screen.getByText('Button text')).toBeInTheDocument()
-  })
 })

package/src/ui/primitives/button/button.tsx

@@ -1,8 +1,5 @@
-import {
-  button,
-  buttonLoadingBox,
+import type {
   ButtonStyleProps,
-  composeClassNames,
   DisplayStyleProps,
   FlexStyleProps,
   GapStyleProps,
@@ -10,59 +7,63 @@ import {
   ResponsiveProp,
   Width,
 } from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {ElementType, ForwardedRef, forwardRef, isValidElement, ReactNode} from 'react'
+import {button, buttonLoadingBox, composeClassNames} from '@sanity/ui/css'
+import type {FontTextSize, Space} from '@sanity/ui/theme'
+import {type ElementType as ReactElementType, isValidElement, type ReactNode} from 'react'
 import {isValidElementType} from 'react-is'
 
-import {ButtonMode, ButtonTextAlign, ButtonTone, Props} from '../../types'
+import type {ButtonMode, ButtonTextAlign, ButtonTone, ComponentType, Props} from '../../types'
 import {Box} from '../box'
 import {Spinner} from '../spinner'
-import {Text, TextProps} from '../text'
+import type {TextOwnProps} from '../text'
+import {Text} from '../text'
 
-/**
- * @public
- */
-export interface ButtonProps
-  extends ButtonStyleProps,
-    DisplayStyleProps,
-    FlexStyleProps,
-    GapStyleProps,
-    PaddingStyleProps {
-  'data-ui'?: string
-  'fontSize'?: ResponsiveProp<FontTextSize>
-  'href'?: string
-  'mode'?: ButtonMode
-  'icon'?: ElementType | ReactNode
-  'iconRight'?: ElementType | ReactNode
-  /** @beta Do not use in production, as this might change.*/
-  'loading'?: boolean
-  'selected'?: boolean
-  /** @deprecated Use `gap` instead. */
-  'space'?: ResponsiveProp<Space>
-  'textAlign'?: ButtonTextAlign
-  'muted'?: boolean
-  'target'?: string
-  'text'?: ReactNode
-  'textOverflow'?: TextProps['textOverflow']
-  'textWeight'?: TextProps['weight']
-  'tone'?: ButtonTone
-  'type'?: 'button' | 'reset' | 'submit'
-  'width'?: ResponsiveProp<Width>
-}
+/** @public */
+export const DEFAULT_BUTTON_ELEMENT = 'button'
+
+/** @public */
+export type ButtonOwnProps = ButtonStyleProps &
+  DisplayStyleProps &
+  GapStyleProps &
+  PaddingStyleProps & {
+    'align'?: FlexStyleProps['align']
+    'data-ui'?: string
+    'disabled'?: boolean
+    'fontSize'?: ResponsiveProp<FontTextSize>
+    'mode'?: ButtonMode
+    'icon'?: ReactElementType | ReactNode
+    'iconRight'?: ReactElementType | ReactNode
+    'justify'?: FlexStyleProps['justify']
+    /** @beta Do not use in production, as this might change.*/
+    'loading'?: boolean
+    'selected'?: boolean
+    /** @deprecated Use `gap` instead. */
+    'space'?: ResponsiveProp<Space>
+    'textAlign'?: ButtonTextAlign
+    'muted'?: boolean
+    'target'?: string
+    'text'?: ReactNode
+    'textOverflow'?: TextOwnProps['textOverflow']
+    'textWeight'?: TextOwnProps['weight']
+    'tone'?: ButtonTone
+    'width'?: ResponsiveProp<Width>
+  }
+
+/** @public */
+export type ButtonElementType = 'a' | 'button' | 'label' | ComponentType
+
+/** @public */
+export type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<ButtonOwnProps, E>
 
-/**
- * @public
- */
-export const Button = forwardRef(function Button(
-  props: Props<ButtonProps, 'button'>,
-  ref: ForwardedRef<HTMLButtonElement>,
+/** @public */
+export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(
+  props: ButtonProps<E>,
 ) {
   const {
-    // align = 'center',
-    as: As = 'button',
+    align = 'center',
+    as: Element = DEFAULT_BUTTON_ELEMENT,
     children,
     className,
-    direction,
     disabled,
     display = 'inline-flex',
     flex,
@@ -70,7 +71,6 @@ export const Button = forwardRef(function Button(
     gap = props.space ?? props.padding ?? 3,
     gapX,
     gapY,
-    href,
     icon: IconComponent,
     iconRight: IconRightComponent,
     justify = 'center',
@@ -94,20 +94,26 @@ export const Button = forwardRef(function Button(
     type = 'button',
     muted = false,
     width,
-    // wrap,
-    ...restProps
-  } = props
+    ...rest
+  } = props as ButtonProps<typeof DEFAULT_BUTTON_ELEMENT>
+
+  let href: string | undefined = undefined
+
+  if ('href' in rest) {
+    href = typeof rest.href === 'string' ? rest.href : href
+    delete rest.href
+  }
 
   return (
-    <As
+    <Element
       data-ui="Button"
-      {...restProps}
+      {...rest}
       className={composeClassNames(className, button({display, flex, mode, radius, tone, width}))}
       data-disabled={loading || disabled ? '' : undefined}
       data-selected={selected ? '' : undefined}
       disabled={Boolean(loading || disabled)}
+      // @ts-expect-error - TODO: fix this
       href={disabled ? undefined : href}
-      ref={ref}
       type={type}
     >
       {Boolean(loading) && (
@@ -126,9 +132,8 @@ export const Button = forwardRef(function Button(
 
       {(IconComponent || text || IconRightComponent) && (
         <Box
-          // align={align}
+          align={align}
           as="span"
-          direction={direction}
           display="flex"
           flex={1}
           gap={gap}
@@ -142,8 +147,6 @@ export const Button = forwardRef(function Button(
           paddingBottom={paddingBottom}
           paddingLeft={paddingLeft}
           paddingRight={paddingRight}
-          // width="fill"
-          // wrap={wrap}
         >
           {IconComponent && (
             <Text as="span" flex="none" muted size={fontSize}>
@@ -177,15 +180,8 @@ export const Button = forwardRef(function Button(
 
       {children && (
         <Box
-          // align={align}
           as="span"
-          // direction={direction}
-          // display="flex"
           flex={1}
-          // gap={gap}
-          // gapX={gapX}
-          // gapY={gapY}
-          // justify={justify}
           padding={padding}
           paddingX={paddingX}
           paddingY={paddingY}
@@ -193,14 +189,12 @@ export const Button = forwardRef(function Button(
           paddingBottom={paddingBottom}
           paddingLeft={paddingLeft}
           paddingRight={paddingRight}
-          // width="fill"
-          // wrap={wrap}
         >
           {children}
         </Box>
       )}
-    </As>
+    </Element>
   )
-})
+}
 
-Button.displayName = 'ForwardRef(Button)'
+Button.displayName = 'Button'

package/src/ui/primitives/card/__workshop__/asComponent.tsx

@@ -5,10 +5,10 @@ const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
 ): React.JSX.Element {
-  const {children, req, ...restProps} = props
+  const {children, req, ...rest} = props
 
   return (
-    <a data-required={req} {...restProps} ref={ref}>
+    <a data-required={req} {...rest} ref={ref}>
       {children}
     </a>
   )
@@ -19,7 +19,7 @@ export default function AsComponentStory() {
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Card as={CustomLink} data-as="a" {...props} padding={3}>
+      <Card as={CustomLink} data-as="a" {...props} padding={3} req="1">
         <Text size={1}>As component</Text>
       </Card>
     </Flex>

package/src/ui/primitives/card/card.tsx

@@ -1,16 +1,16 @@
 import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
-import {createElement, ForwardedRef, forwardRef} from 'react'
-import {isValidElementType} from 'react-is'
+import {createElement} from 'react'
 
 import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+import {Box, BoxElementType, BoxOwnProps} from '../box'
 import {CardProvider} from './cardProvider'
 import {useCard} from './useCard'
 
-/**
- * @public
- */
-export interface CardProps extends BoxProps, CardStyleProps {
+/** @public */
+export const DEFAULT_CARD_ELEMENT = 'div'
+
+/** @public */
+export interface CardOwnProps extends BoxOwnProps, CardStyleProps {
   /**
    * Do not use in production.
    * @beta
@@ -22,39 +22,39 @@ export interface CardProps extends BoxProps, CardStyleProps {
    */
   __unstable_focusRing?: boolean
   disabled?: boolean
-  href?: string
   pressed?: boolean
   selected?: boolean
   target?: string
 }
 
+/** @public */
+export type CardElementType = BoxElementType
+
+/** @public */
+export type CardProps<E extends CardElementType = CardElementType> = Props<CardOwnProps, E>
+
 /**
  * The `Card` component acts much like a `Box`, but with a background and foreground color.
  * Components within a `Card` inherit its colors.
  *
  * @public
  */
-export const Card = forwardRef(function Card(
-  props: Props<CardProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
+export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(props: CardProps<E>) {
   const {
     __unstable_checkered: checkered = false,
     __unstable_focusRing: focusRing = false,
-    as: asProp,
+    as = DEFAULT_CARD_ELEMENT,
     className,
+    disabled,
     pressed,
     radius = 0,
     scheme: schemeProp,
-    // selectable,
     selected,
     shadow,
     style,
     tone: toneProp = 'default',
-    ...restProps
-  } = props
-
-  const as = isValidElementType(asProp) ? asProp : 'div'
+    ...rest
+  } = props as CardProps<typeof DEFAULT_CARD_ELEMENT>
 
   const parent = useCard()
 
@@ -69,7 +69,7 @@ export const Card = forwardRef(function Card(
   let node = (
     <Box
       data-ui="Card"
-      {...restProps}
+      {...rest}
       as={as}
       className={composeClassNames(
         className,
@@ -80,11 +80,11 @@ export const Card = forwardRef(function Card(
         }),
       )}
       data-checkered={checkered ? '' : undefined}
+      data-disabled={disabled ? '' : undefined}
       data-focus-ring={focusRing ? '' : undefined}
       data-pressed={pressed ? '' : undefined}
       data-selected={selected ? '' : undefined}
       radius={radius}
-      ref={ref}
       style={style}
     />
   )
@@ -113,6 +113,6 @@ export const Card = forwardRef(function Card(
   }
 
   return node
-})
+}
 
-Card.displayName = 'ForwardRef(Card)'
+Card.displayName = 'Card'

package/src/ui/primitives/card/cardProvider.tsx

@@ -17,3 +17,5 @@ export function CardProvider(props: {
 
   return <CardContext.Provider value={context}>{children}</CardContext.Provider>
 }
+
+CardProvider.displayName = 'CardProvider'

package/src/ui/primitives/checkbox/checkbox.tsx

@@ -1,37 +1,48 @@
 import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
 import {checkbox, checkboxInput, composeClassNames} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
+import {useEffect, useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks'
-import {Props} from '../../types'
+import {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface CheckboxProps {
+/** @public */
+export const DEFAULT_CHECKBOX_ELEMENT = 'input'
+
+/** @public */
+export type CheckboxOwnProps = {
   indeterminate?: boolean
   customValidity?: string
 }
 
+/** @public */
+export type CheckboxElementType = 'input' | ComponentType
+
+/** @public */
+export type CheckboxProps<E extends CheckboxElementType = CheckboxElementType> = Props<
+  CheckboxOwnProps,
+  E
+>
+
 /**
  * Checkboxes allow the user to select one or more items from a set.
  *
  * @public
  */
-export const Checkbox = forwardRef(function Checkbox(
-  props: Props<CheckboxProps, 'input'>,
-  forwardedRef: ForwardedRef<HTMLInputElement>,
+export function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX_ELEMENT>(
+  props: CheckboxProps<E>,
 ) {
   const {
+    as: Element = DEFAULT_CHECKBOX_ELEMENT,
     checked,
     className,
     disabled,
     indeterminate,
     customValidity,
     readOnly,
+    ref: forwardedRef,
     style,
-    ...restProps
-  } = props
+    ...rest
+  } = props as CheckboxProps<typeof DEFAULT_CHECKBOX_ELEMENT>
 
   const ref = useRef<HTMLInputElement | null>(null)
 
@@ -51,8 +62,8 @@ export const Checkbox = forwardRef(function Checkbox(
 
   return (
     <span className={composeClassNames(className, checkbox())} data-ui="Checkbox" style={style}>
-      <input
-        {...restProps}
+      <Element
+        {...rest}
         checked={checked}
         className={composeClassNames(className, checkboxInput())}
         data-disabled={disabled ? '' : undefined}
@@ -69,6 +80,6 @@ export const Checkbox = forwardRef(function Checkbox(
       </span>
     </span>
   )
-})
+}
 
-Checkbox.displayName = 'ForwardRef(Checkbox)'
+Checkbox.displayName = 'Checkbox'