[components] Fix typings

packages/@sanity/components/src/@types/classnames.d.ts

@@ -0,0 +1,4 @@
+declare module 'classnames' {
+  const classNames: (...args: (string | undefined | null | boolean)[]) => string
+  export default classNames
+}

packages/@sanity/components/src/@types/parts.d.ts

@@ -1,68 +1,58 @@
-/* eslint-disable react/no-multi-comp, @typescript-eslint/no-empty-function*/
-declare module 'part:@sanity/components/*' {
-  class SanityInputComponent extends React.Component<any> {
-    focus() {}
-  }
-  export default SanityInputComponent
-}
+/* eslint-disable import/export */
 
-declare module 'part:@sanity/components/click-outside' {
-  // export const ClickOutside: ComponentType<{}>
-  export const ClickOutside: any
+declare module 'part:@sanity/base/router' {
+  export * from '@sanity/base/src/router'
 }
 
-declare module 'part:@sanity/components/menu-button' {
-  export const MenuButton: ComponentType<{
-    // @todo: typings
-    buttonProps?: any
-    menu?: React.ReactNode
-    placement?: string
-    open?: boolean
-    setOpen?: (val: boolean) => void
-  }>
+declare module 'part:@sanity/base/check-icon' {
+  export {default} from '@sanity/base/src/components/icons/Check'
 }
 
-declare module 'part:@sanity/components/popover' {
-  // export const Popover: ComponentType<{}>
-  export const Popover: any
+declare module 'part:@sanity/base/cog-icon' {
+  export {default} from '@sanity/base/src/components/icons/Cog'
 }
 
-declare module 'part:@sanity/components/tooltip' {
-  // export const Tooltip: ComponentType<{}>
-  export const Tooltip: any
+declare module 'part:@sanity/base/error-outline-icon' {
+  export {default} from '@sanity/base/src/components/icons/ErrorOutline'
 }
 
-declare module 'part:@sanity/components/selects/*' {
-  class SanitySelectComponent extends React.Component<any> {
-    focus() {}
-  }
-  export default SanitySelectComponent
+declare module 'part:@sanity/base/link-icon' {
+  export {default} from '@sanity/base/src/components/icons/Link'
 }
 
-declare module 'part:@sanity/components/toggles/*' {
-  class SanityToggleComponent extends React.Component<any> {
-    focus() {}
-  }
-  export default SanityToggleComponent
+declare module 'part:@sanity/base/close-icon' {
+  export {default} from '@sanity/base/src/components/icons/CloseIcon'
 }
 
-declare module 'part:@sanity/components/tags/*' {
-  class SanityTagsComponent extends React.Component<any> {
-    focus() {}
-  }
-  export default SanityTagsComponent
+declare module 'part:@sanity/base/users-icon' {
+  export {default} from '@sanity/base/src/components/icons/UsersIcon'
 }
 
-declare module 'part:@sanity/components/textareas/*' {
-  class SanityTextareaComponent extends React.Component<any> {
-    focus() {}
-  }
-  export default SanityTextareaComponent
-}
+declare module 'part:@sanity/components/buttons/default' {
+  const DefaultButton: React.ComponentClass<{
+    kind?: 'simple' | 'secondary'
+    color?: 'primary' | 'success' | 'danger' | 'white' | 'warning'
+    onBlur?: () => void
+    onClick?: () => void
+    children?: React.ReactNode
+    inverted?: boolean
+    icon?: React.ComponentType<{}>
+    loading?: boolean
+    className?: string
+    disabled?: boolean
+    tabIndex?: number
+    padding?: 'large' | 'default' | 'small' | 'none'
+    bleed?: boolean
+    selected?: boolean
+    size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'
+  }>
 
-declare module 'config:@sanity/form-builder'
-declare module 'all:part:@sanity/form-builder/input/image/asset-source'
+  export default DefaultButton
+}
 
-declare module 'part:@sanity/components/utilities/portal'
-declare module 'part:@sanity/components/lists/*'
-declare module 'part:@sanity/*'
+///////////////////////////////////////////////////////////////////////////////////////////////////
+// Because `@sanity/components` depends on `@sanity/base` we need these "ambient" definitions
+///////////////////////////////////////////////////////////////////////////////////////////////////
+declare module 'part:@sanity/base/client'
+declare module 'part:@sanity/base/authentication-fetcher'
+declare module 'part:@sanity/base/user'

packages/@sanity/components/src/menuButton/menuButton.tsx

@@ -4,12 +4,29 @@ import Button from 'part:@sanity/components/buttons/default'
 import {ClickOutside} from 'part:@sanity/components/click-outside'
 import {Popover} from 'part:@sanity/components/popover'
 import React, {useCallback} from 'react'
+import {Placement} from '../types'
 
 interface MenuButtonProps {
   boundaryElement?: HTMLElement | null
-  buttonProps?: any // @todo: button typings
+  buttonProps?: {
+    kind?: 'simple' | 'secondary'
+    color?: 'primary' | 'success' | 'danger' | 'white' | 'warning'
+    onBlur?: () => void
+    onClick?: () => void
+    children?: React.ReactNode
+    inverted?: boolean
+    icon?: React.ComponentType<{}>
+    loading?: boolean
+    className?: string
+    disabled?: boolean
+    tabIndex?: number
+    padding?: 'large' | 'default' | 'small' | 'none'
+    bleed?: boolean
+    selected?: boolean
+    size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'
+  }
   menu?: React.ReactNode
-  placement?: string
+  placement?: Placement
   open?: boolean
   setOpen: (val: boolean) => void
 }
@@ -31,11 +48,11 @@ export function MenuButton(props: MenuButtonProps & React.HTMLProps<HTMLDivEleme
 
   return (
     <ClickOutside onClickOutside={handleClickOutside}>
-      {ref => (
+      {(ref: React.MutableRefObject<HTMLDivElement>) => (
         <div {...restProps} ref={ref}>
           <Popover
             boundaryElement={boundaryElement}
-            content={menu}
+            content={menu as any}
             open={open}
             placement={placement}
           >

packages/@sanity/components/src/popover/popover.tsx

@@ -5,6 +5,7 @@ import React, {cloneElement, useState, useEffect} from 'react'
 import {usePopper} from 'react-popper'
 import {Modifier} from '@popperjs/core'
 import maxSize from 'popper-max-size-modifier'
+import {Placement} from '../types'
 import {PopoverArrow} from './arrow'
 
 import styles from './popover.css'
@@ -22,24 +23,12 @@ const applyModifer: Modifier<'applyMaxSize', {}> = {
 
 interface PopoverProps {
   boundaryElement?: HTMLElement | null
-  children: JSX.Element
+  children: React.ReactElement
   className?: string
-  content: React.ReactNode
-  disabled: boolean
+  content?: React.ReactNode
+  disabled?: boolean
   open?: boolean
-  placement?:
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
+  placement?: Placement
   targetElement?: HTMLElement | null
   tone?: 'navbar'
 }

packages/@sanity/components/src/presence/PopoverList.tsx

@@ -1,16 +1,18 @@
-/* eslint-disable react/no-multi-comp */
+/* eslint-disable react/require-default-props */
+
 import React, {useState} from 'react'
 import {Popover} from 'part:@sanity/components/popover'
 import {Tooltip} from 'part:@sanity/components/tooltip'
 import CogIcon from 'part:@sanity/base/cog-icon'
 import {useId} from '@reach/auto-id'
+import {Placement} from '../types'
 import styles from './PopoverList.css'
 import {User} from './types'
 
 type Props<Item> = {
   items: Item[]
   renderItem: (item: Item, onClose?: (event: any) => void) => React.ReactNode
-  placement?: string
+  placement?: Placement
   children?: React.ReactNode
   disabled?: boolean
   isGlobal?: boolean
@@ -105,7 +107,7 @@ export default function PopoverList<Item extends {user: User}>({
   if (mode === 'tooltip') {
     return (
       <div className={styles.root}>
-        <Tooltip content={html} disabled={disabled} placement={placement}>
+        <Tooltip content={html as any} disabled={disabled} placement={placement}>
           {popoverChildren}
         </Tooltip>
       </div>
@@ -114,7 +116,7 @@ export default function PopoverList<Item extends {user: User}>({
 
   return (
     <div className={styles.root}>
-      <Popover content={html} disabled={disabled} placement={placement} open={isOpen}>
+      <Popover content={html as any} disabled={disabled} placement={placement} open={isOpen}>
         {popoverChildren}
       </Popover>
     </div>

packages/@sanity/components/src/toggles/Checkbox.tsx

@@ -1,8 +1,8 @@
 import React, {useEffect} from 'react'
+import {useId} from '@reach/auto-id'
+import {Marker} from '../types'
 import styles from './Checkbox.css'
 import sharedStyles from './shared.css'
-import {Marker} from '../typedefs'
-import {useId} from '@reach/auto-id'
 
 type Props = {
   label: any

packages/@sanity/components/src/toggles/Switch.tsx

@@ -1,8 +1,8 @@
 import React, {useRef, useEffect} from 'react'
+import {useId} from '@reach/auto-id'
+import {Marker} from '../types'
 import styles from './Switch.css'
 import sharedStyles from './shared.css'
-import {Marker} from '../typedefs'
-import {useId} from '@reach/auto-id'
 
 type Props = {
   label: string

packages/@sanity/components/src/tooltip/tooltip.tsx

@@ -1,28 +1,17 @@
 import classNames from 'classnames'
 import React, {useEffect, useState} from 'react'
 import {usePopper} from 'react-popper'
+import {Placement} from '../types'
 import {Arrow} from './arrow'
 
 import styles from './tooltip.css'
 
 export interface TooltipProps {
   children: React.ReactElement
   className?: string
-  content: React.ReactNode
+  content: React.ReactNode | JSX.Element
   disabled: boolean
-  placement?:
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
+  placement?: Placement
   tone?: 'navbar'
 }
 

packages/@sanity/components/src/types.ts

@@ -0,0 +1,20 @@
+export type Marker = {
+  path: any[]
+  type: string
+  level: string
+  item: any
+}
+
+export type Placement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'

packages/@sanity/components/src/validation/ValidationList.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
+import {Marker} from '../types'
 import ValidationListItem from './ValidationListItem'
-import {Marker} from '../typedefs'
 
 import styles from './ValidationList.css'
 

packages/@sanity/components/src/validation/ValidationListItem.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 import ErrorOutlineIcon from 'part:@sanity/base/error-outline-icon'
-import {Marker} from '../typedefs'
+import {Marker} from '../types'
 
 import styles from './ValidationListItem.css'
 

packages/@sanity/components/src/validation/ValidationStatus.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 import ErrorOutlineIcon from 'part:@sanity/base/error-outline-icon'
 import CheckIcon from 'part:@sanity/base/check-icon'
 import {Tooltip} from 'part:@sanity/components/tooltip'
-import {Marker} from '../typedefs'
+import {Marker} from '../types'
 import ValidationList from './ValidationList'
 
 import styles from './ValidationStatus.css'
@@ -59,14 +59,14 @@ export default class ValidationStatus extends React.PureComponent<Props> {
       </div>
     )
 
+    const content = showSummary ? (
+      <TooltipText />
+    ) : (
+      <ValidationList markers={validation} kind="simple" />
+    )
+
     return (
-      <Tooltip
-        className={styles.root}
-        disabled={hideTooltip}
-        content={
-          showSummary ? <TooltipText /> : <ValidationList markers={validation} kind="simple" />
-        }
-      >
+      <Tooltip className={styles.root} disabled={hideTooltip} content={content as any}>
         <div className={styles.inner}>
           {validation && validation.length > 0 && (
             <div className={iconClassName}>