@sanity/ui 3.2.0 → 3.3.0

package/src/core/primitives/box/box.tsx

@@ -15,6 +15,7 @@ import {
   responsivePaddingStyle,
   ResponsivePaddingStyleProps,
 } from '../../styles/internal'
+import {ElementType, Props} from '../../types'
 import {
   ResponsiveBoxProps,
   ResponsiveFlexItemProps,
@@ -24,18 +25,24 @@ import {
 } from '../types'
 
 /**
+ * The props that `Box` adds on top of the element it renders as.
+ *
  * @public
  */
-export interface BoxProps
+export interface BoxOwnProps
   extends ResponsiveFlexItemProps,
     ResponsiveBoxProps,
     ResponsiveGridItemProps,
     ResponsiveMarginProps,
     ResponsivePaddingProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
+  forwardedAs?: ElementType
 }
 
+/**
+ * @public
+ */
+export type BoxProps<E extends ElementType = 'div'> = Props<BoxOwnProps, E>
+
 const StyledBox = styled.div<
   FlexItemStyleProps &
     ResponsiveBoxStyleProps &
@@ -51,14 +58,8 @@ const StyledBox = styled.div<
   responsivePaddingStyle,
 )
 
-/**
- * The `Box` component is a basic layout wrapper component which provides utility properties
- * for flex, margins and padding.
- *
- * @public
- */
-export const Box = forwardRef(function Box(
-  props: BoxProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
+const BoxComponent = forwardRef(function Box(
+  props: BoxOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -140,4 +141,14 @@ export const Box = forwardRef(function Box(
     </StyledBox>
   )
 })
-Box.displayName = 'ForwardRef(Box)'
+BoxComponent.displayName = 'ForwardRef(Box)'
+
+/**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
+ * @public
+ */
+export const Box = BoxComponent as unknown as <E extends ElementType = 'div'>(
+  props: BoxProps<E>,
+) => React.JSX.Element

package/src/core/primitives/button/__workshop__/disabled.tsx

@@ -5,12 +5,12 @@ import {Container} from '../../container/container'
 import {Grid} from '../../grid/grid'
 import {Stack} from '../../stack/stack'
 import {Text} from '../../text/text'
-import {Button, ButtonProps} from '../button'
+import {Button, ButtonOwnProps} from '../button'
 
 const GAP = 4
 const COLUMNS = 3
 
-const DEFAULT_PROPS: ButtonProps = {
+const DEFAULT_PROPS: ButtonOwnProps = {
   icon: SquareIcon,
   iconRight: SquareIcon,
 }

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

@@ -27,7 +27,7 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
 
 export default function SanityUploadButtonWorkaroundStory() {
   return (
-    <Flex align="center" height="fill" htmlFor="file" justify="center">
+    <Flex align="center" height="fill" justify="center">
       <SanityUploadButton icon={UploadIcon} tabIndex={0} text="Upload">
         <input type="file" />
       </SanityUploadButton>

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

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

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

@@ -6,7 +6,7 @@ import {axe} from 'jest-axe'
 
 import {render} from '../../../../test'
 import {Flex} from '../flex'
-import {Button, ButtonProps} from './button'
+import {Button, ButtonOwnProps} from './button'
 
 jest.mock('../flex', () => {
   const actual = jest.requireActual('../flex')
@@ -45,11 +45,11 @@ describe('atoms/button', () => {
   })
 
   it('should wrap button', () => {
-    function WrappedButton({button: buttonProps}: {button: ButtonProps}) {
+    function WrappedButton({button: buttonProps}: {button: ButtonOwnProps}) {
       return <Button {...buttonProps} />
     }
 
-    const buttonProps: ButtonProps = {
+    const buttonProps: ButtonOwnProps = {
       text: 'Button text',
     }
 

package/src/core/primitives/button/button.tsx

@@ -6,7 +6,15 @@ import {styled} from 'styled-components'
 import {_getArrayProp, ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme_v2} from '../../theme'
-import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from '../../types'
+import {
+  ButtonMode,
+  ButtonTextAlign,
+  ButtonTone,
+  ButtonWidth,
+  ElementType,
+  FlexJustify,
+  Props,
+} from '../../types'
 import {Box} from '../box'
 import {Flex} from '../flex'
 import {Spinner} from '../spinner'
@@ -17,8 +25,7 @@ import {buttonBaseStyles, buttonColorStyles} from './styles'
 /**
  * @public
  */
-export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export interface ButtonOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
   fontSize?: number | number[]
   mode?: ButtonMode
   icon?: React.ElementType | React.ReactNode
@@ -43,6 +50,11 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   width?: ButtonWidth
 }
 
+/**
+ * @public
+ */
+export type ButtonProps<E extends ElementType = 'button'> = Props<ButtonOwnProps, E>
+
 const StyledButton = styled.button<
   {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
     ThemeProps
@@ -63,11 +75,11 @@ const LoadingBox = styled.div`
   box-shadow: inherit;
 `
 
-/**
- * @public
- */
-export const Button = forwardRef(function Button(
-  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'width'>,
+const ButtonComponent = forwardRef(function Button(
+  props: ButtonOwnProps & {as?: ElementType} & Omit<
+      React.HTMLProps<HTMLButtonElement>,
+      'as' | 'width'
+    >,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
@@ -188,4 +200,11 @@ export const Button = forwardRef(function Button(
     </StyledButton>
   )
 })
-Button.displayName = 'ForwardRef(Button)'
+ButtonComponent.displayName = 'ForwardRef(Button)'
+
+/**
+ * @public
+ */
+export const Button = ButtonComponent as unknown as <E extends ElementType = 'button'>(
+  props: ButtonProps<E>,
+) => React.JSX.Element

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

@@ -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="example">
         <Text size={1}>As component</Text>
       </Card>
     </Flex>

package/src/core/primitives/card/card.tsx

@@ -13,8 +13,8 @@ import {
   ResponsiveShadowStyleProps,
 } from '../../styles/internal'
 import {ThemeColorProvider, useRootTheme} from '../../theme'
-import {CardTone} from '../../types'
-import {Box, BoxProps} from '../box'
+import {CardTone, ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
 import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
 import {cardStyle} from './styles'
 import {CardStyleProps} from './types'
@@ -22,8 +22,8 @@ import {CardStyleProps} from './types'
 /**
  * @public
  */
-export interface CardProps
-  extends BoxProps,
+export interface CardOwnProps
+  extends BoxOwnProps,
     ResponsiveBorderProps,
     ResponsiveRadiusProps,
     ResponsiveShadowProps {
@@ -37,12 +37,19 @@ export interface CardProps
    * @beta
    */
   __unstable_focusRing?: boolean
+  disabled?: boolean
   muted?: boolean
   pressed?: boolean
   scheme?: ThemeColorSchemeKey
+  selected?: boolean
   tone?: CardTone
 }
 
+/**
+ * @public
+ */
+export type CardProps<E extends ElementType = 'div'> = Props<CardOwnProps, E>
+
 const StyledCard = styled(Box)<
   CardStyleProps &
     ResponsiveRadiusStyleProps &
@@ -50,14 +57,8 @@ const StyledCard = styled(Box)<
     ResponsiveShadowStyleProps
 >(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
 
-/**
- * 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: CardProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
+const CardComponent = forwardRef(function Card(
+  props: CardOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -114,4 +115,14 @@ export const Card = forwardRef(function Card(
     </ThemeColorProvider>
   )
 })
-Card.displayName = 'ForwardRef(Card)'
+CardComponent.displayName = 'ForwardRef(Card)'
+
+/**
+ * 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 = CardComponent as unknown as <E extends ElementType = 'div'>(
+  props: CardProps<E>,
+) => React.JSX.Element

package/src/core/primitives/code/code.tsx

@@ -3,6 +3,7 @@ import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
+import {ElementType, Props} from '../../types'
 import {codeBaseStyle} from './styles'
 
 const LazyRefractor = lazy(() => import('./refractor'))
@@ -10,21 +11,22 @@ const LazyRefractor = lazy(() => import('./refractor'))
 /**
  * @public
  */
-export interface CodeProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export interface CodeOwnProps {
   /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
   weight?: string
 }
 
-const StyledCode = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
-
 /**
  * @public
  */
-export const Code = forwardRef(function Code(
-  props: CodeProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
+export type CodeProps<E extends ElementType = 'pre'> = Props<CodeOwnProps, E>
+
+const StyledCode = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
+
+const CodeComponent = forwardRef(function Code(
+  props: CodeOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
   ref: React.ForwardedRef<HTMLElement>,
 ) {
   const {children, language, size = 2, weight, ...restProps} = props
@@ -43,4 +45,11 @@ export const Code = forwardRef(function Code(
     </StyledCode>
   )
 })
-Code.displayName = 'ForwardRef(Code)'
+CodeComponent.displayName = 'ForwardRef(Code)'
+
+/**
+ * @public
+ */
+export const Code = CodeComponent as unknown as <E extends ElementType = 'pre'>(
+  props: CodeProps<E>,
+) => React.JSX.Element

package/src/core/primitives/container/container.tsx

@@ -2,7 +2,8 @@ import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
-import {Box, BoxProps} from '../box'
+import {ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
 import {ResponsiveWidthProps} from '../types'
 import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
 import {ResponsiveWidthStyleProps} from './types'
@@ -10,20 +11,23 @@ import {ResponsiveWidthStyleProps} from './types'
 /**
  * @public
  */
-export interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
+export interface ContainerOwnProps extends BoxOwnProps, ResponsiveWidthProps {}
+
+/**
+ * @public
+ */
+export type ContainerProps<E extends ElementType = 'div'> = Props<ContainerOwnProps, E>
 
 const StyledContainer = styled(Box)<ResponsiveWidthStyleProps>(
   containerBaseStyle,
   responsiveContainerWidthStyle,
 )
 
-/**
- * The `Container` component wraps content layout in a defined set of widths.
- *
- * @public
- */
-export const Container = forwardRef(function Container(
-  props: ContainerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+const ContainerComponent = forwardRef(function Container(
+  props: ContainerOwnProps & {as?: ElementType} & Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'width'
+    >,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {as, width = 2, ...restProps} = props
@@ -38,4 +42,13 @@ export const Container = forwardRef(function Container(
     />
   )
 })
-Container.displayName = 'ForwardRef(Container)'
+ContainerComponent.displayName = 'ForwardRef(Container)'
+
+/**
+ * The `Container` component wraps content layout in a defined set of widths.
+ *
+ * @public
+ */
+export const Container = ContainerComponent as unknown as <E extends ElementType = 'div'>(
+  props: ContainerProps<E>,
+) => React.JSX.Element

package/src/core/primitives/flex/flex.tsx

@@ -8,31 +8,32 @@ import {
   responsiveFlexStyle,
   ResponsiveFlexStyleProps,
 } from '../../styles/internal'
-import {Box, BoxProps} from '../box'
+import {ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
 import {ResponsiveFlexItemProps, ResponsiveFlexProps} from '../types'
 
 /**
  * @public
  */
-export interface FlexProps
-  extends Omit<BoxProps, 'display'>,
+export interface FlexOwnProps
+  extends Omit<BoxOwnProps, 'display'>,
     ResponsiveFlexProps,
     ResponsiveFlexItemProps {
   gap?: number | number[]
 }
 
+/**
+ * @public
+ */
+export type FlexProps<E extends ElementType = 'div'> = Props<FlexOwnProps, E>
+
 const StyledFlex = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
   flexItemStyle,
   responsiveFlexStyle,
 )
 
-/**
- * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
- *
- * @public
- */
-export const Flex = forwardRef(function Flex(
-  props: FlexProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
+const FlexComponent = forwardRef(function Flex(
+  props: FlexOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
@@ -51,4 +52,13 @@ export const Flex = forwardRef(function Flex(
     />
   )
 })
-Flex.displayName = 'ForwardRef(Flex)'
+FlexComponent.displayName = 'ForwardRef(Flex)'
+
+/**
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+ *
+ * @public
+ */
+export const Flex = FlexComponent as unknown as <E extends ElementType = 'div'>(
+  props: FlexProps<E>,
+) => React.JSX.Element

package/src/core/primitives/grid/grid.test.tsx

@@ -73,6 +73,8 @@ describe('primitives/grid', () => {
       </Grid>,
     )
     expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$rows: [3]}))
-    expect(mockedResponsiveGridStyle).not.toHaveBeenCalledWith(expect.objectContaining({$rows: [1]}))
+    expect(mockedResponsiveGridStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$rows: [1]}),
+    )
   })
 })

package/src/core/primitives/grid/grid.tsx

@@ -3,23 +3,27 @@ import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
 import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
-import {Box, BoxProps} from '../box'
+import {ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
 import {ResponsiveGridProps} from '../types'
 
 /**
  * @public
  */
-export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
-
-const StyledGrid = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
+export interface GridOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveGridProps {}
 
 /**
- * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
- *
  * @public
  */
-export const Grid = forwardRef(function Grid(
-  props: GridProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>,
+export type GridProps<E extends ElementType = 'div'> = Props<GridOwnProps, E>
+
+const StyledGrid = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
+
+const GridComponent = forwardRef(function Grid(
+  props: GridOwnProps & {as?: ElementType} & Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'rows'
+    >,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -58,4 +62,13 @@ export const Grid = forwardRef(function Grid(
     </StyledGrid>
   )
 })
-Grid.displayName = 'ForwardRef(Grid)'
+GridComponent.displayName = 'ForwardRef(Grid)'
+
+/**
+ * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
+ *
+ * @public
+ */
+export const Grid = GridComponent as unknown as <E extends ElementType = 'div'>(
+  props: GridProps<E>,
+) => React.JSX.Element

package/src/core/primitives/heading/heading.tsx

@@ -9,7 +9,7 @@ import {
   responsiveTextAlignStyle,
   ResponsiveTextAlignStyleProps,
 } from '../../styles/internal'
-import {TextAlign} from '../../types'
+import {ElementType, Props, TextAlign} from '../../types'
 import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
 import {headingBaseStyle} from './styles'
 import {HeadingStyleProps} from './types'
@@ -17,10 +17,9 @@ import {HeadingStyleProps} from './types'
 /**
  * @public
  */
-export interface HeadingProps {
+export interface HeadingOwnProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   muted?: boolean
   size?: number | number[]
   /**
@@ -32,17 +31,17 @@ export interface HeadingProps {
   weight?: ThemeFontWeightKey
 }
 
+/**
+ * @public
+ */
+export type HeadingProps<E extends ElementType = 'div'> = Props<HeadingOwnProps, E>
+
 const StyledHeading = styled.div<
   HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps
 >(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont)
 
-/**
- * Typographic headings.
- *
- * @public
- */
-export const Heading = forwardRef(function Heading(
-  props: HeadingProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
+const HeadingComponent = forwardRef(function Heading(
+  props: HeadingOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
   ref: React.ForwardedRef<HTMLElement>,
 ) {
   const {
@@ -77,4 +76,13 @@ export const Heading = forwardRef(function Heading(
     </StyledHeading>
   )
 })
-Heading.displayName = 'ForwardRef(Heading)'
+HeadingComponent.displayName = 'ForwardRef(Heading)'
+
+/**
+ * Typographic headings.
+ *
+ * @public
+ */
+export const Heading = HeadingComponent as unknown as <E extends ElementType = 'div'>(
+  props: HeadingProps<E>,
+) => React.JSX.Element

package/src/core/primitives/inline/inline.tsx

@@ -2,14 +2,15 @@ import {Children, forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
-import {Box, BoxProps} from '../box'
+import {ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
 import {inlineBaseStyle, inlineSpaceStyle} from './styles'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
 /**
  * @public
  */
-export interface InlineProps extends Omit<BoxProps, 'display'> {
+export interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {
   /**
    * The spacing between children.
    * @deprecated Use `gap` instead. `space` will be removed in v4.
@@ -19,15 +20,15 @@ export interface InlineProps extends Omit<BoxProps, 'display'> {
   gap?: number | number[]
 }
 
-const StyledInline = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
-
 /**
- * The `Inline` component is a layout utility for aligning and spacing items horizontally.
- *
  * @public
  */
-export const Inline = forwardRef(function Inline(
-  props: InlineProps & React.HTMLProps<HTMLDivElement>,
+export type InlineProps<E extends ElementType = 'div'> = Props<InlineOwnProps, E>
+
+const StyledInline = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
+
+const InlineComponent = forwardRef(function Inline(
+  props: InlineOwnProps & {as?: ElementType} & React.HTMLProps<HTMLDivElement>,
   ref,
 ) {
   const {as, children: childrenProp, gap, space: deprecated_space, ...restProps} = props
@@ -50,4 +51,13 @@ export const Inline = forwardRef(function Inline(
     </StyledInline>
   )
 })
-Inline.displayName = 'ForwardRef(Inline)'
+InlineComponent.displayName = 'ForwardRef(Inline)'
+
+/**
+ * The `Inline` component is a layout utility for aligning and spacing items horizontally.
+ *
+ * @public
+ */
+export const Inline = InlineComponent as unknown as <E extends ElementType = 'div'>(
+  props: InlineProps<E>,
+) => React.JSX.Element