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

package/src/ui/primitives/code/code.tsx

@@ -1,49 +1,51 @@
 import {code, composeClassNames, FontStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, lazy, Suspense} from 'react'
+import {lazy, Suspense} from 'react'
 
-import {Props} from '../../types'
+import {ComponentType, Props} from '../../types'
 
 const LazyRefractor = lazy(() => import('./refractor'))
 
-/**
- * @public
- */
-export interface CodeProps extends Omit<FontStyleProps, 'align'> {
+/** @public */
+export const DEFAULT_CODE_ELEMENT = 'pre'
+
+/** @public */
+export type CodeOwnProps = Omit<FontStyleProps, 'align'> & {
   /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
 }
 
-/**
- * @public
- */
-export const Code = forwardRef(function Code(
-  props: Props<CodeProps, 'pre'>,
-  ref: ForwardedRef<HTMLPreElement>,
-) {
+/** @public */
+export type CodeElementType = 'div' | 'pre' | ComponentType
+
+/** @public */
+export type CodeProps<E extends CodeElementType = CodeElementType> = Props<CodeOwnProps, E>
+
+/** @public */
+export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(props: CodeProps<E>) {
   const {
-    as: As = 'pre',
+    as: Element = DEFAULT_CODE_ELEMENT,
     children,
     className,
     language: languageProp,
     size = 2,
     weight,
-    ...restProps
-  } = props
+    ...rest
+  } = props as CodeProps<typeof DEFAULT_CODE_ELEMENT>
+
   const language = typeof languageProp === 'string' ? languageProp : undefined
 
   return (
-    <As
+    <Element
       data-ui="Code"
-      {...restProps}
+      {...rest}
       className={composeClassNames(className, code({size, weight}))}
-      ref={ref}
     >
       <Suspense fallback={<code>{children}</code>}>
         <LazyRefractor language={language} value={children} />
       </Suspense>
-    </As>
+    </Element>
   )
-})
+}
 
-Code.displayName = 'ForwardRef(Code)'
+Code.displayName = 'Code'

package/src/ui/primitives/container/container.tsx

@@ -1,35 +1,46 @@
 import {composeClassNames, container, ContainerStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
 
 import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+import {Box, BoxElementType, BoxOwnProps} from '../box'
 
-/**
- * @public
- */
-export interface ContainerProps extends Omit<BoxProps, 'width'>, ContainerStyleProps {}
+/** @public */
+export const DEFAULT_CONTAINER_ELEMENT = 'div'
+
+/** @public */
+export type ContainerOwnProps = Omit<BoxOwnProps, 'width'> & ContainerStyleProps
+
+/** @public */
+export type ContainerElementType = BoxElementType
+
+/** @public */
+export type ContainerProps<E extends ContainerElementType = ContainerElementType> = Props<
+  ContainerOwnProps,
+  E
+>
 
 /**
  * The `Container` component wraps content layout in a defined set of widths.
  *
  * @public
  */
-export const Container = forwardRef(function Container(
-  props: Props<ContainerProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Container<E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT>(
+  props: ContainerProps<E>,
 ) {
-  const {as, className, sizing = 'border', width = 2, ...restProps} = props
+  const {
+    as = DEFAULT_CONTAINER_ELEMENT,
+    className,
+    width = 2,
+    ...rest
+  } = props as ContainerProps<typeof DEFAULT_CONTAINER_ELEMENT>
 
   return (
     <Box
       data-ui="Container"
-      {...restProps}
+      {...rest}
       as={as}
       className={composeClassNames(className, container({width}))}
-      ref={ref}
-      sizing={sizing}
     />
   )
-})
+}
 
-Container.displayName = 'ForwardRef(Container)'
+Container.displayName = 'Container'

package/src/ui/primitives/flex/flex.tsx

@@ -1,29 +1,31 @@
-import {ForwardedRef, forwardRef} from 'react'
-
 import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+import {Box, BoxElementType, BoxOwnProps} from '../box'
 
-/**
- * @public
- */
-export interface FlexProps extends Omit<BoxProps, 'display'> {
-  htmlFor?: string
-}
+/** @public */
+export const DEFAULT_FLEX_ELEMENT = 'div'
+
+/** @public */
+export type FlexOwnProps = Omit<BoxOwnProps, 'display'>
+
+/** @public */
+export type FlexElementType = BoxElementType
+
+/** @public */
+export type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexOwnProps, E>
 
 /**
  * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
  *
  * @public
  */
-export const Flex = forwardRef(function Flex(
-  props: Props<FlexProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {as, direction = 'row', ...restProps} = props
+export function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(props: FlexProps<E>) {
+  const {
+    as = DEFAULT_FLEX_ELEMENT,
+    direction = 'row',
+    ...rest
+  } = props as FlexProps<typeof DEFAULT_FLEX_ELEMENT>
 
-  return (
-    <Box data-ui="Flex" {...restProps} as={as} direction={direction} display="flex" ref={ref} />
-  )
-})
+  return <Box data-ui="Flex" {...rest} as={as} direction={direction} display="flex" />
+}
 
-Flex.displayName = 'ForwardRef(Flex)'
+Flex.displayName = 'Flex'

package/src/ui/primitives/grid/grid.tsx

@@ -1,30 +1,35 @@
-import {ForwardedRef, forwardRef} from 'react'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+/** @public */
+export const DEFAULT_GRID_ELEMENT = 'div'
 
-/**
- * @public
- */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface GridProps extends Omit<BoxProps, 'display'> {}
+/** @public */
+export type GridOwnProps = Omit<BoxOwnProps, 'display'>
+
+/** @public */
+export type GridElementType = BoxElementType
+
+/** @public */
+export type GridProps<E extends GridElementType = GridElementType> = Props<GridOwnProps, E>
 
 /**
  * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
  *
  * @public
  */
-export const Grid = forwardRef(function Grid(
-  props: Props<GridProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {as, children, ...restProps} = props
+export function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(props: GridProps<E>) {
+  const {
+    as = DEFAULT_GRID_ELEMENT,
+    children,
+    ...rest
+  } = props as GridProps<typeof DEFAULT_GRID_ELEMENT>
 
   return (
-    <Box data-ui="Grid" {...restProps} as={as} display="grid" ref={ref}>
+    <Box data-ui="Grid" {...rest} as={as} display="grid">
       {children}
     </Box>
   )
-})
+}
 
-Grid.displayName = 'ForwardRef(Grid)'
+Grid.displayName = 'Grid'

package/src/ui/primitives/heading/heading.tsx

@@ -5,28 +5,46 @@ import {
   textOverflow,
   type TextOverflowStyleProps,
 } from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
 
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface HeadingProps extends HeadingStyleProps, TextOverflowStyleProps {}
+/** @public */
+export const DEFAULT_HEADING_ELEMENT = 'div'
+
+/** @public */
+export type HeadingOwnProps = HeadingStyleProps & TextOverflowStyleProps
+
+/** @public */
+export type HeadingElementType =
+  | 'div'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'label'
+  | 'span'
+  | ComponentType
+
+/** @public */
+export type HeadingProps<E extends HeadingElementType = HeadingElementType> = Props<
+  HeadingOwnProps,
+  E
+>
 
 /**
  * Typographic headings.
  *
  * @public
  */
-export const Heading = forwardRef(function Heading(
-  props: Props<HeadingProps, 'div'>,
-  ref: ForwardedRef<HTMLElement>,
+export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(
+  props: HeadingProps<E>,
 ) {
   const {
     accent = false,
     align,
-    as: As = 'div',
+    as: Element = DEFAULT_HEADING_ELEMENT,
     children,
     className,
     flex,
@@ -34,13 +52,13 @@ export const Heading = forwardRef(function Heading(
     size = 2,
     textOverflow: textOverflowProp,
     weight,
-    ...restProps
-  } = props
+    ...rest
+  } = props as HeadingProps<typeof DEFAULT_HEADING_ELEMENT>
 
   return (
-    <As
+    <Element
       data-ui="Heading"
-      {...restProps}
+      {...rest}
       className={composeClassNames(
         className,
         heading({
@@ -52,11 +70,16 @@ export const Heading = forwardRef(function Heading(
           weight,
         }),
       )}
-      ref={ref}
     >
-      <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
-    </As>
+      <span
+        className={textOverflow({
+          textOverflow: textOverflowProp,
+        })}
+      >
+        {children}
+      </span>
+    </Element>
   )
-})
+}
 
-Heading.displayName = 'ForwardRef(Heading)'
+Heading.displayName = 'Heading'

package/src/ui/primitives/inline/inline.tsx

@@ -1,50 +1,53 @@
-import {ResponsiveProp} from '@sanity/ui/css'
+import {FlexStyleProps, GridStyleProps, ResponsiveProp} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
-import {Children, ForwardedRef, forwardRef, useMemo} from 'react'
 
-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 InlineProps extends Omit<BoxProps, 'align' | 'display' | 'justify'> {
+/** @public */
+export const DEFAULT_INLINE_ELEMENT = 'div'
+
+/** @public */
+export type InlineOwnProps = Omit<BoxOwnProps, keyof FlexStyleProps | keyof GridStyleProps> & {
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
 
+/** @public */
+export type InlineElementType = BoxElementType
+
+/** @public */
+export type InlineProps<E extends InlineElementType = InlineElementType> = Props<InlineOwnProps, E>
+
 /**
  * The `Inline` component is a layout utility for aligning and spacing items horizontally.
  *
  * @public
  */
-export const Inline = forwardRef(function Inline(
-  props: Props<InlineProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(
+  props: InlineProps<E>,
 ) {
-  const {as, children: childrenProp, gap, gapX, gapY, space, ...restProps} = props
-
-  const children = useMemo(
-    () => Children.map(childrenProp, (child) => child && <Box maxWidth="fill">{child}</Box>),
-    [childrenProp],
-  )
+  const {
+    as = DEFAULT_INLINE_ELEMENT,
+    children,
+    gap,
+    space,
+    ...rest
+  } = props as InlineProps<typeof DEFAULT_INLINE_ELEMENT>
 
   return (
     <Box
       data-ui="Inline"
-      {...restProps}
+      {...rest}
       align="center"
       as={as}
       display="flex"
       gap={gap ?? space}
-      gapX={gapX}
-      gapY={gapY}
-      ref={ref}
       wrap="wrap"
     >
       {children}
     </Box>
   )
-})
+}
 
-Inline.displayName = 'ForwardRef(Inline)'
+Inline.displayName = 'Inline'

package/src/ui/primitives/kbd/kbd.tsx

@@ -1,55 +1,57 @@
 import {composeClassNames, kbd, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef} from 'react'
+import {FontTextSize} from '@sanity/ui/theme'
 
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+import {ComponentType, Props} from '../../types'
+import {Box, BoxElementType, BoxOwnProps} from '../box'
 import {Text} from '../text'
 
-/**
- * @public
- */
-export interface KBDProps extends BoxProps, RadiusStyleProps {
-  fontSize?: ResponsiveProp<FontTextSize>
-  padding?: ResponsiveProp<Space>
-}
+/** @public */
+export const DEFAULT_KBD_ELEMENT = 'kbd'
+
+/** @public */
+export type KBDOwnProps = BoxOwnProps &
+  RadiusStyleProps & {
+    fontSize?: ResponsiveProp<FontTextSize>
+  }
+
+/** @public */
+export type KBDElementType = 'kbd' | ComponentType
+
+/** @public */
+export type KBDProps<E extends KBDElementType = KBDElementType> = Props<KBDOwnProps, E>
 
 /**
  * Used to define some text as keyboard input.
  *
  * @public
  */
-export const KBD = forwardRef(function KBD(
-  props: Props<KBDProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
+export function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(props: KBDProps<E>) {
   const {
-    as = 'kbd',
+    as = DEFAULT_KBD_ELEMENT,
     children,
     className,
     display = 'inline-block',
     fontSize = 0,
     padding = 1,
     radius = 2,
-    ...restProps
-  } = props
+    ...rest
+  } = props as KBDProps<typeof DEFAULT_KBD_ELEMENT>
 
   return (
     <Box
       data-ui="KBD"
-      {...restProps}
-      as={as}
+      {...rest}
+      as={as as BoxElementType}
       className={composeClassNames(className, kbd({radius}))}
       display={display}
       muted
       padding={padding}
-      ref={ref}
     >
       <Text as="span" muted size={fontSize} weight="semibold">
         {children}
       </Text>
     </Box>
   )
-})
+}
 
-KBD.displayName = 'ForwardRef(KBD)'
+KBD.displayName = 'KBD'

package/src/ui/primitives/label/label.tsx

@@ -1,52 +1,62 @@
 import {
   composeClassNames,
-  FontStyleProps,
   label,
-  LabelSize,
-  ResponsiveProp,
+  LabelStyleProps,
   textOverflow,
   TextOverflowStyleProps,
 } from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
 
-import {Props} from '../../types'
+import {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface LabelProps extends FontStyleProps, TextOverflowStyleProps {
-  accent?: boolean
-  htmlFor?: string
-  muted?: boolean
-  size?: ResponsiveProp<LabelSize>
-}
+/** @public */
+export const DEFAULT_LABEL_ELEMENT = 'div'
+
+/** @public */
+export type LabelOwnProps = LabelStyleProps & TextOverflowStyleProps
+
+/** @public */
+export type LabelElementType =
+  | 'div'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'label'
+  | 'li'
+  | 'p'
+  | 'span'
+  | ComponentType
+
+/** @public */
+export type LabelProps<E extends LabelElementType = LabelElementType> = Props<LabelOwnProps, E>
 
 /**
  * Typographic labels.
  *
  * @public
  */
-export const Label = forwardRef(function Label(
-  props: Props<LabelProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>(
+  props: LabelProps<E>,
 ) {
   const {
     accent,
     align,
-    as: As = 'div',
+    as: Element = DEFAULT_LABEL_ELEMENT,
     children,
     className,
     muted = false,
     size = 1,
     textOverflow: textOverflowProp,
     weight = 'medium',
-    ...restProps
+    ...rest
   } = props
 
   return (
-    <As
+    <Element
       data-ui="Label"
-      {...restProps}
+      {...rest}
       className={composeClassNames(
         className,
         label({
@@ -57,11 +67,16 @@ export const Label = forwardRef(function Label(
           weight,
         }),
       )}
-      ref={ref}
     >
-      <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
-    </As>
+      <span
+        className={textOverflow({
+          textOverflow: textOverflowProp,
+        })}
+      >
+        {children}
+      </span>
+    </Element>
   )
-})
+}
 
-Label.displayName = 'ForwardRef(Label)'
+Label.displayName = 'Label'