@sanity/ui 3.2.0 → 3.3.0

package/dist/_visual-editing.d.mts

@@ -1,10 +1,6 @@
 import {BaseTheme} from '@sanity/ui/theme'
-import {DetailedHTMLProps} from 'react'
-import {FastOmit} from 'styled-components'
 import {ForwardRefExoticComponent} from 'react'
-import {HTMLAttributes} from 'react'
 import {HTMLProps} from 'react'
-import {IStyledComponentBase} from 'styled-components/dist/types'
 import {Ref} from 'react'
 import {RefAttributes} from 'react'
 import {RootTheme} from '@sanity/ui/theme'
@@ -15,16 +11,20 @@ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 
+/**
+ * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
+ *
+ * @public
+ */
+declare type Assign<T extends object, U extends object> = Omit<T, keyof U> & U
+
 /**
  * The `Box` component is a basic layout wrapper component which provides utility properties
  * for flex, margins and padding.
  *
  * @public
  */
-export declare const Box: ForwardRefExoticComponent<
-  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare const Box: <E extends ElementType = 'div'>(props: BoxProps<E>) => React.JSX.Element
 
 /**
  * @public
@@ -42,18 +42,24 @@ declare type BoxHeight = 'stretch' | 'fill'
 declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
 
 /**
+ * The props that `Box` adds on top of the element it renders as.
+ *
  * @public
  */
-declare interface BoxProps
+declare 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
+ */
+declare type BoxProps<E extends ElementType = 'div'> = Props<BoxOwnProps, E>
+
 /**
  * @public
  */
@@ -62,10 +68,9 @@ declare type BoxSizing = 'content' | 'border'
 /**
  * @public
  */
-export declare const Button: ForwardRefExoticComponent<
-  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'width' | 'as'>, 'ref'> &
-    RefAttributes<HTMLButtonElement>
->
+export declare const Button: <E extends ElementType = 'button'>(
+  props: ButtonProps<E>,
+) => React.JSX.Element
 
 /**
  * @public
@@ -75,8 +80,7 @@ declare type ButtonMode = ThemeColorButtonModeKey
 /**
  * @public
  */
-declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+declare interface ButtonOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
   fontSize?: number | number[]
   mode?: ButtonMode
   icon?: React.ElementType | React.ReactNode
@@ -101,6 +105,11 @@ declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPr
   width?: ButtonWidth
 }
 
+/**
+ * @public
+ */
+declare type ButtonProps<E extends ElementType = 'button'> = Props<ButtonOwnProps, E>
+
 /**
  * @public
  */
@@ -122,16 +131,13 @@ declare type ButtonWidth = 'fill'
  *
  * @public
  */
-export declare const Card: ForwardRefExoticComponent<
-  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare const Card: <E extends ElementType = 'div'>(props: CardProps<E>) => React.JSX.Element
 
 /**
  * @public
  */
-declare interface CardProps
-  extends BoxProps,
+declare interface CardOwnProps
+  extends BoxOwnProps,
     ResponsiveBorderProps,
     ResponsiveRadiusProps,
     ResponsiveShadowProps {
@@ -145,17 +151,30 @@ declare interface CardProps
    * @beta
    */
   __unstable_focusRing?: boolean
+  disabled?: boolean
   muted?: boolean
   pressed?: boolean
   scheme?: ThemeColorSchemeKey
+  selected?: boolean
   tone?: CardTone
 }
 
+/**
+ * @public
+ */
+declare type CardProps<E extends ElementType = 'div'> = Props<CardOwnProps, E>
+
 /**
  * @public
  */
 declare type CardTone = ThemeColorCardToneKey | 'inherit'
 
+/** @public */
+declare type ComponentType<P = any> =
+  | React.FunctionComponent<P>
+  | React.ComponentClass<P>
+  | React.ExoticComponent<P>
+
 /**
  * @public
  */
@@ -166,15 +185,18 @@ declare type Delay =
       close: number
     }>
 
+/** @public */
+declare type ElementType<P = any> = TagType | ComponentType<P>
+
+/** @public */
+declare type EmptyProps = object
+
 /**
  * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
  *
  * @public
  */
-export declare const Flex: ForwardRefExoticComponent<
-  Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, 'wrap' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare const Flex: <E extends ElementType = 'div'>(props: FlexProps<E>) => React.JSX.Element
 
 /**
  * @public
@@ -200,13 +222,18 @@ declare type FlexJustify =
 /**
  * @public
  */
-declare interface FlexProps
-  extends Omit<BoxProps, 'display'>,
+declare interface FlexOwnProps
+  extends Omit<BoxOwnProps, 'display'>,
     ResponsiveFlexProps,
     ResponsiveFlexItemProps {
   gap?: number | number[]
 }
 
+/**
+ * @public
+ */
+declare type FlexProps<E extends ElementType = 'div'> = Props<FlexOwnProps, E>
+
 /**
  * @public
  */
@@ -222,10 +249,7 @@ declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
  *
  * @public
  */
-export declare const Grid: ForwardRefExoticComponent<
-  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare const Grid: <E extends ElementType = 'div'>(props: GridProps<E>) => React.JSX.Element
 
 /**
  * @public
@@ -275,7 +299,12 @@ declare type GridItemRowStart = 'auto' | number
 /**
  * @public
  */
-declare interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
+declare interface GridOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveGridProps {}
+
+/**
+ * @public
+ */
+declare type GridProps<E extends ElementType = 'div'> = Props<GridOwnProps, E>
 
 /**
  * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
@@ -283,7 +312,7 @@ declare interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridPro
  * @public
  */
 export declare const Hotkeys: ForwardRefExoticComponent<
-  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLElement>
+  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as' | 'ref'> & RefAttributes<HTMLElement>
 >
 
 /**
@@ -304,7 +333,7 @@ declare interface HotkeysProps {
 /**
  * @public
  */
-declare interface InlineProps extends Omit<BoxProps, 'display'> {
+declare interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {
   /**
    * The spacing between children.
    * @deprecated Use `gap` instead. `space` will be removed in v4.
@@ -357,36 +386,33 @@ declare interface LayerProviderProps {
  * @public
  */
 export declare const Menu: ForwardRefExoticComponent<
-  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'role' | 'as'>, 'ref'> &
+  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'tabIndex' | 'role'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare const MenuDivider: IStyledComponentBase<
-  'web',
-  FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>
-> &
-  string
+export declare const MenuDivider: <E extends ElementType = 'hr'>(
+  props: MenuDividerProps<E>,
+) => React.JSX.Element
 
 /**
  * @public
  */
-export declare function MenuGroup(
-  props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
-    MenuGroupProps,
-): React.JSX.Element
+declare type MenuDividerProps<E extends ElementType = 'hr'> = Props<EmptyProps, E>
 
-export declare namespace MenuGroup {
-  var displayName: string
-}
+/**
+ * @public
+ */
+export declare const MenuGroup: <E extends ElementType = 'button'>(
+  props: MenuGroupProps<E>,
+) => React.JSX.Element
 
 /**
  * @public
  */
-declare interface MenuGroupProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+declare interface MenuGroupOwnProps {
   fontSize?: number | number[]
   icon?: React.ElementType | React.ReactNode
   menu?: Omit<
@@ -415,17 +441,19 @@ declare interface MenuGroupProps {
 /**
  * @public
  */
-export declare const MenuItem: ForwardRefExoticComponent<
-  MenuItemProps &
-    Omit<HTMLProps<HTMLDivElement>, 'selected' | 'height' | 'ref' | 'tabIndex' | 'as'> &
-    RefAttributes<HTMLDivElement>
->
+declare type MenuGroupProps<E extends ElementType = 'button'> = Props<MenuGroupOwnProps, E>
 
 /**
  * @public
  */
-export declare interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export declare const MenuItem: <E extends ElementType = 'button'>(
+  props: MenuItemProps<E>,
+) => React.JSX.Element
+
+/**
+ * @public
+ */
+declare interface MenuItemOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
   fontSize?: number | number[]
   hotkeys?: string[]
   icon?: React.ElementType | React.ReactNode
@@ -441,6 +469,11 @@ export declare interface MenuItemProps extends ResponsivePaddingProps, Responsiv
   tone?: SelectableTone
 }
 
+/**
+ * @public
+ */
+export declare type MenuItemProps<E extends ElementType = 'button'> = Props<MenuItemOwnProps, E>
+
 /**
  * @public
  */
@@ -495,7 +528,7 @@ declare type Placement =
  */
 export declare const Popover: ForwardRefExoticComponent<
   Omit<
-    PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'children' | 'as'>,
+    PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'as' | 'children'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -637,6 +670,19 @@ declare interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
+/**
+ * Resolves the props of a polymorphic component: the props of the element/component passed to `as`
+ * (defaulting to the component's own element), with the component's own props assigned on top.
+ *
+ * @public
+ */
+declare type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
+  E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>,
+  P & {
+    as?: E
+  }
+>
+
 /**
  * @public
  */
@@ -810,15 +856,14 @@ declare interface SpinnerProps {
  *
  * @public
  */
-export declare const Stack: ForwardRefExoticComponent<
-  StackProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
->
+export declare const Stack: <E extends ElementType = 'div'>(
+  props: StackProps<E>,
+) => React.JSX.Element
 
 /**
  * @public
  */
-declare interface StackProps extends BoxProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+declare interface StackOwnProps extends BoxOwnProps {
   gap?: number | number[]
   /**
    * @deprecated Use `gap` instead. `space` will be removed in v4.
@@ -826,6 +871,11 @@ declare interface StackProps extends BoxProps {
   space?: number | number[]
 }
 
+/**
+ * @public
+ */
+declare type StackProps<E extends ElementType = 'div'> = Props<StackOwnProps, E>
+
 /**
  * @public
  * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
@@ -840,7 +890,7 @@ export declare const Tab: ForwardRefExoticComponent<
     TabProps &
       Omit<
         HTMLProps<HTMLButtonElement>,
-        'label' | 'id' | 'type' | 'width' | 'aria-controls' | 'as'
+        'width' | 'label' | 'id' | 'type' | 'as' | 'aria-controls'
       >,
     'ref'
   > &
@@ -858,7 +908,7 @@ export declare const TabList: ForwardRefExoticComponent<
 /**
  * @public
  */
-declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
+declare interface TabListProps extends Omit<InlineOwnProps, 'height'> {
   children: Array<React.JSX.Element | null | undefined | false>
 }
 
@@ -880,15 +930,15 @@ declare interface TabProps {
   'tone'?: ButtonTone
 }
 
+/** @public */
+declare type TagType = keyof React.JSX.IntrinsicElements
+
 /**
  * The `Text` component is an agile, themed typographic element.
  *
  * @public
  */
-declare const Text_2: ForwardRefExoticComponent<
-  Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+declare const Text_2: <E extends ElementType = 'div'>(props: TextProps<E>) => React.JSX.Element
 export {Text_2 as Text}
 
 /**
@@ -902,14 +952,14 @@ declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
  * @public
  */
 export declare const TextInput: ForwardRefExoticComponent<
-  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'prefix' | 'as'>, 'ref'> &
+  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'as' | 'prefix'>, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
 /**
  * @public
  */
-declare type TextInputClearButtonProps = Omit<ButtonProps, 'as'> &
+declare type TextInputClearButtonProps = ButtonOwnProps &
   Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'onClick' | 'onMouseDown' | 'ref'>
 
 /**
@@ -967,10 +1017,9 @@ declare type TextInputType =
 /**
  * @public
  */
-declare interface TextProps {
+declare interface TextOwnProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   /** When `true` the text color will be muted. */
   muted?: boolean
   size?: number | number[]
@@ -983,6 +1032,11 @@ declare interface TextProps {
   weight?: ThemeFontWeightKey
 }
 
+/**
+ * @public
+ */
+declare type TextProps<E extends ElementType = 'div'> = Props<TextOwnProps, E>
+
 /**
  * @public
  */
@@ -1008,7 +1062,7 @@ declare interface ThemeProviderProps {
  * @public
  */
 export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'children' | 'as'>, 'ref'> &
+  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'as' | 'children'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >