@sanity/ui 3.1.14 → 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
@@ -87,7 +91,11 @@ declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPr
    */
   loading?: boolean
   selected?: boolean
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
+  gap?: number | number[]
   muted?: boolean
   text?: React.ReactNode
   textAlign?: ButtonTextAlign
@@ -97,6 +105,11 @@ declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPr
   width?: ButtonWidth
 }
 
+/**
+ * @public
+ */
+declare type ButtonProps<E extends ElementType = 'button'> = Props<ButtonOwnProps, E>
+
 /**
  * @public
  */
@@ -118,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 {
@@ -141,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
  */
@@ -162,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
@@ -196,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
  */
@@ -218,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
@@ -271,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.
@@ -279,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>
 >
 
 /**
@@ -287,8 +320,12 @@ export declare const Hotkeys: ForwardRefExoticComponent<
  */
 declare interface HotkeysProps {
   fontSize?: number | number[]
+  gap?: number | number[]
   padding?: number | number[]
   radius?: Radius | Radius[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
   keys?: string[]
 }
@@ -296,9 +333,14 @@ declare interface HotkeysProps {
 /**
  * @public
  */
-declare interface InlineProps extends Omit<BoxProps, 'display'> {
-  /** The spacing between children. */
+declare interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {
+  /**
+   * The spacing between children.
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
+  /** The spacing between children. */
+  gap?: number | number[]
 }
 
 /**
@@ -344,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<
@@ -390,6 +429,10 @@ declare interface MenuGroupProps {
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'open'>
   radius?: Radius | Radius[]
+  gap?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
   text: React.ReactNode
   tone?: SelectableTone
@@ -398,28 +441,39 @@ 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
   iconRight?: React.ElementType | React.ReactNode
   pressed?: boolean
   selected?: boolean
+  gap?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
   text?: React.ReactNode
   tone?: SelectableTone
 }
 
+/**
+ * @public
+ */
+export declare type MenuItemProps<E extends ElementType = 'button'> = Props<MenuItemOwnProps, E>
+
 /**
  * @public
  */
@@ -439,6 +493,10 @@ declare interface MenuProps extends ResponsivePaddingProps {
   'originElement'?: HTMLElement | null
   'registerElement'?: (el: HTMLElement) => () => void
   'shouldFocus'?: 'first' | 'last' | null
+  'gap'?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   'space'?: number | number[]
   'aria-labelledby'?: string
   'onBlurCapture'?: (event: FocusEvent) => void
@@ -470,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>
@@ -612,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
  */
@@ -660,11 +731,35 @@ declare interface ResponsiveFlexProps {
  * @public
  */
 declare interface ResponsiveGridItemProps {
+  gridColumn?: GridItemColumn | GridItemColumn[]
+  /**
+   * @deprecated Use `gridColumn` instead. `column` will be removed in v4.
+   */
   column?: GridItemColumn | GridItemColumn[]
+  gridColumnStart?: GridItemColumnStart | GridItemColumnStart[]
+  /**
+   * @deprecated Use `gridColumnStart` instead. `columnStart` will be removed in v4.
+   */
   columnStart?: GridItemColumnStart | GridItemColumnStart[]
+  gridColumnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
+  /**
+   * @deprecated Use `gridColumnEnd` instead. `columnEnd` will be removed in v4.
+   */
   columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
+  gridRow?: GridItemRow | GridItemRow[]
+  /**
+   * @deprecated Use `gridRow` instead. `row` will be removed in v4.
+   */
   row?: GridItemRow | GridItemRow[]
+  gridRowStart?: GridItemRowStart | GridItemRowStart[]
+  /**
+   * @deprecated Use `gridRowStart` instead. `rowStart` will be removed in v4.
+   */
   rowStart?: GridItemRowStart | GridItemRowStart[]
+  gridRowEnd?: GridItemRowEnd | GridItemRowEnd[]
+  /**
+   * @deprecated Use `gridRowEnd` instead. `rowEnd` will be removed in v4.
+   */
   rowEnd?: GridItemRowEnd | GridItemRowEnd[]
 }
 
@@ -675,11 +770,19 @@ declare interface ResponsiveGridProps {
   autoRows?: GridAutoRows | GridAutoRows[]
   autoCols?: GridAutoCols | GridAutoCols[]
   autoFlow?: GridAutoFlow | GridAutoFlow[]
+  /**
+   * @deprecated Use `gridTemplateColumns` instead. `columns` will be removed in v4.
+   */
   columns?: number | number[]
+  gridTemplateColumns?: number | number[]
   gap?: number | number[]
   gapX?: number | number[]
   gapY?: number | number[]
+  /**
+   * @deprecated Use `gridTemplateRows` instead. `rows` will be removed in v4.
+   */
   rows?: number | number[]
+  gridTemplateRows?: number | number[]
 }
 
 /**
@@ -753,18 +856,26 @@ 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.
+   */
   space?: number | number[]
 }
 
+/**
+ * @public
+ */
+declare type StackProps<E extends ElementType = 'div'> = Props<StackOwnProps, E>
+
 /**
  * @public
  * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
@@ -779,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'
   > &
@@ -797,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>
 }
 
@@ -819,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}
 
 /**
@@ -841,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'>
 
 /**
@@ -875,7 +986,11 @@ declare interface TextInputProps {
   padding?: number | number[]
   prefix?: React.ReactNode
   radius?: Radius | Radius[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
+  gap?: number | number[]
   suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey
@@ -902,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[]
@@ -918,6 +1032,11 @@ declare interface TextProps {
   weight?: ThemeFontWeightKey
 }
 
+/**
+ * @public
+ */
+declare type TextProps<E extends ElementType = 'div'> = Props<TextOwnProps, E>
+
 /**
  * @public
  */
@@ -943,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>
 >