[components] Refactor types and implement consistent usage PopoverDia…

…log for confirm popovers

packages/@sanity/components/sanity.json

@@ -625,15 +625,15 @@
     },
     {
       "implements": "part:@sanity/components/dialogs/popover",
-      "path": "dialogs/PopOver"
+      "path": "dialogs/PopoverDialog"
     },
     {
       "implements": "part:@sanity/components/dialogs/pane-popover",
       "path": "dialogs/PanePopover"
     },
     {
       "implements": "part:@sanity/components/dialogs/popover-style",
-      "path": "dialogs/PopOver.css"
+      "path": "dialogs/PopoverDialog.css"
     },
 
     {

packages/@sanity/components/src/buttons/DefaultButton.ts

@@ -1,7 +1,4 @@
 import createButtonLike from './createButtonLike'
-import {ButtonColor, ButtonProps} from './types'
-
-export {ButtonColor, ButtonProps}
 
 export default createButtonLike('button', {
   displayName: 'DefaultButton',

packages/@sanity/components/src/dialogs/PopOver.tsx → packages/@sanity/components/src/dialogs/PopoverDialog.tsx

@@ -13,50 +13,24 @@ import Escapable from '../utilities/Escapable'
 import {Placement} from '../types'
 import {DialogAction} from './types'
 
-interface PopOverProps {
-  title?: string
+interface PopoverDialogProps {
+  actions?: DialogAction[]
   children: React.ReactNode
+  color?: 'default' | 'danger'
+  hasAnimation?: boolean
   onClose?: () => void
   onClickOutside?: () => void
   onEscape?: (event: KeyboardEvent) => void
   onAction?: (action: DialogAction) => void
-  placement?: Placement
-  useOverlay?: boolean
-  hasAnimation?: boolean
-  color?: 'default' | 'danger'
   padding?: 'none' | 'small' | 'medium' | 'large'
+  placement?: Placement
   referenceElement?: HTMLElement | null
-  actions?: DialogAction[]
   size?: 'small' | 'medium' | 'large' | 'auto'
+  title?: string
+  useOverlay?: boolean
 }
 
-function PopoverDialogActionButton({
-  action,
-  onAction
-}: {
-  action: DialogAction
-  onAction?: (a: DialogAction) => void
-}) {
-  const handleAction = useCallback(() => {
-    if (onAction) onAction(action)
-  }, [action, onAction])
-
-  return (
-    <Button
-      onClick={handleAction}
-      color={action.color}
-      disabled={action.disabled}
-      kind={action.kind}
-      autoFocus={action.autoFocus}
-      className={action.secondary ? styles.actionSecondary : ''}
-      inverted={action.inverted}
-    >
-      {action.title}
-    </Button>
-  )
-}
-
-export default function PopOver(props: PopOverProps) {
+function PopoverDialog(props: PopoverDialogProps) {
   const {
     title,
     color,
@@ -187,3 +161,31 @@ export default function PopOver(props: PopOverProps) {
     </>
   )
 }
+
+export default PopoverDialog
+
+function PopoverDialogActionButton({
+  action,
+  onAction
+}: {
+  action: DialogAction
+  onAction?: (a: DialogAction) => void
+}) {
+  const handleAction = useCallback(() => {
+    if (onAction) onAction(action)
+  }, [action, onAction])
+
+  return (
+    <Button
+      onClick={handleAction}
+      color={action.color}
+      disabled={action.disabled}
+      kind={action.kind}
+      autoFocus={action.autoFocus}
+      className={action.secondary ? styles.actionSecondary : ''}
+      inverted={action.inverted}
+    >
+      {action.title}
+    </Button>
+  )
+}

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

@@ -17,19 +17,23 @@ const dialogTestContent = {
 }
 
 const paragraph = chance.paragraph()
-const paragraphs = range(0, 20).map(i => <p key={i}>{chance.paragraph()}</p>)
+const paragraphs = range(0, 20).map(i => (
+  <p key={i} style={{margin: 0}}>
+    {chance.paragraph()}
+  </p>
+))
 
 function renderContent(type) {
   switch (type) {
     case 'paragraph':
-      return <p>{paragraph}</p>
+      return <p style={{margin: 0}}>{paragraph}</p>
     case 'longtext':
       return <div>{paragraphs}</div>
     case 'example':
       return (
         <>
-          <h1>With dialog content</h1>
-          <p>{paragraph}</p>
+          <h1 style={{margin: 0}}>With dialog content</h1>
+          <p style={{margin: 0}}>{paragraph}</p>
         </>
       )
     default:

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

@@ -0,0 +1 @@
+export * from './types'

packages/@sanity/components/src/menus/DefaultMenu.tsx

@@ -9,9 +9,6 @@ import classNames from 'classnames'
 import DefaultMenuItem from './DefaultMenuItem'
 import {MenuItemGroup as MenuItemGroupType, MenuItem as MenuItemType} from './types'
 
-// export typings
-export {MenuItemGroupType, MenuItemType}
-
 interface DefaultMenuProps {
   id?: string
   onAction: (item: MenuItemType) => void

packages/@sanity/components/src/menus/stories/default.tsx

@@ -1,18 +1,19 @@
+import Chance from 'chance'
+import {range} from 'lodash'
 import React from 'react'
-import DefaultMenu, {MenuItemType} from 'part:@sanity/components/menus/default'
-import {action} from 'part:@sanity/storybook'
 import SanityIcon from 'part:@sanity/base/sanity-logo-icon'
+import DefaultMenu from 'part:@sanity/components/menus/default'
+import {action} from 'part:@sanity/storybook'
 import {number, boolean} from 'part:@sanity/storybook/addons/knobs'
 import Sanity from 'part:@sanity/storybook/addons/sanity'
 import {DebugRouterProvider} from 'part:@sanity/storybook/components'
-import {range} from 'lodash'
-import Chance from 'chance'
+import {MenuItem} from '../types'
 
 const chance = new Chance()
 
 export function DefaultStory() {
   const icon = boolean('icons', false) ? SanityIcon : false
-  const items: MenuItemType[] = range(number('#items', 30)).map((item, i) => {
+  const items: MenuItem[] = range(number('#items', 30)).map((item, i) => {
     return {
       title: chance.name(),
       icon: icon || undefined,

packages/@sanity/components/src/panes/DefaultPane.tsx

@@ -2,7 +2,7 @@ import S, {InitialValueTemplateItem} from '@sanity/base/structure-builder'
 import classNames from 'classnames'
 import {negate} from 'lodash'
 import {MenuButton} from 'part:@sanity/components/menu-button'
-import Menu, {MenuItemType, MenuItemGroupType} from 'part:@sanity/components/menus/default'
+import Menu from 'part:@sanity/components/menus/default'
 import IconMoreVert from 'part:@sanity/base/more-vert-icon'
 import {IntentLink} from 'part:@sanity/base/router'
 import Button from 'part:@sanity/components/buttons/default'
@@ -11,6 +11,7 @@ import TabPanel from 'part:@sanity/components/tabs/tab-panel'
 import {ScrollContainer} from '@sanity/base/ScrollContainer'
 import React from 'react'
 import {childrenToElementArray} from '../helpers'
+import {MenuItem, MenuItemGroup} from '../menus/types'
 import Styleable from '../utilities/Styleable'
 
 import defaultStyles from './DefaultPane.css'
@@ -29,10 +30,10 @@ interface DefaultPaneProps {
   isSelected?: boolean
   isScrollable?: boolean
   hasSiblings?: boolean
-  onAction?: (item: MenuItemType) => boolean
-  renderActions?: (actions: MenuItemType[]) => React.ReactNode
-  menuItems?: MenuItemType[]
-  menuItemGroups?: MenuItemGroupType[]
+  onAction?: (item: MenuItem) => boolean
+  renderActions?: (actions: MenuItem[]) => React.ReactNode
+  menuItems?: MenuItem[]
+  menuItemGroups?: MenuItemGroup[]
   initialValueTemplates?: InitialValueTemplateItem[]
   index: number
   footer?: React.ReactNode
@@ -45,7 +46,7 @@ interface State {
   isMenuOpen: boolean
 }
 
-function getActionKey(action: MenuItemType, index: number) {
+function getActionKey(action: MenuItem, index: number) {
   const title = String(action.title)
 
   return (typeof action.action === 'string' ? action.action + title : title) || index
@@ -60,7 +61,7 @@ const noop = () => {
   /* intentional noop */
 }
 
-const isActionButton = (item: MenuItemType) => Boolean(item.showAsAction)
+const isActionButton = (item: MenuItem) => Boolean(item.showAsAction)
 const isMenuButton = negate(isActionButton)
 
 class DefaultPane extends React.PureComponent<DefaultPaneProps, State> {
@@ -143,7 +144,7 @@ class DefaultPane extends React.PureComponent<DefaultPaneProps, State> {
     }
   }
 
-  handleMenuAction = (item: MenuItemType) => {
+  handleMenuAction = (item: MenuItem) => {
     this.setContextMenuOpen(false)
 
     if (typeof item.action === 'function') {
@@ -165,7 +166,7 @@ class DefaultPane extends React.PureComponent<DefaultPaneProps, State> {
     handler(item.params, this)
   }
 
-  renderIntentAction = (action: MenuItemType, i: number): React.ReactElement => {
+  renderIntentAction = (action: MenuItem, i: number): React.ReactElement => {
     const {styles = {}} = this.props
 
     return (
@@ -182,7 +183,7 @@ class DefaultPane extends React.PureComponent<DefaultPaneProps, State> {
     )
   }
 
-  renderActionMenuItem = (item: MenuItemType, index: number) => {
+  renderActionMenuItem = (item: MenuItem, index: number) => {
     if (!item) return null
 
     const {styles = {}} = this.props
@@ -213,15 +214,15 @@ class DefaultPane extends React.PureComponent<DefaultPaneProps, State> {
     )
   }
 
-  renderAction = (action: MenuItemType, i: number): React.ReactNode => {
+  renderAction = (action: MenuItem, i: number): React.ReactNode => {
     if (action.intent) {
       return this.renderIntentAction(action, i)
     }
 
     const styles = this.props.styles || {}
 
     // @todo: typings
-    const items: MenuItemType[] = this.props.initialValueTemplates
+    const items: MenuItem[] = this.props.initialValueTemplates
       ? (S.menuItemsFromInitialValueTemplateItems(this.props.initialValueTemplates) as any)
       : []
 

packages/@sanity/components/src/panes/stories/pane.tsx

@@ -1,17 +1,17 @@
 import ComposeIcon from 'part:@sanity/base/compose-icon'
 import TrashIcon from 'part:@sanity/base/trash-icon'
 import Button from 'part:@sanity/components/buttons/default'
-import {MenuItemType} from 'part:@sanity/components/menus/default'
 import Pane from 'part:@sanity/components/panes/default'
 import {action} from 'part:@sanity/storybook/addons/actions'
 import {boolean, text} from 'part:@sanity/storybook/addons/knobs'
 import Sanity from 'part:@sanity/storybook/addons/sanity'
 import {DebugRouterProvider} from 'part:@sanity/storybook/components'
 import React from 'react'
+import {MenuItem} from '../../menus/types'
 
 import styles from './pane.css'
 
-const menuItems: MenuItemType[] = [
+const menuItems: MenuItem[] = [
   {
     action: 'first',
     title: 'First item',

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

@@ -1,4 +1,4 @@
-export interface PreviewMediaDimensions {
+export interface MediaDimensions {
   width?: number
   height?: number
   fit?: 'clip' | 'crop' | 'fill' | 'fillmax' | 'max' | 'scale' | 'min'

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

@@ -1,10 +1,10 @@
 import React, {forwardRef} from 'react'
+import Button from 'part:@sanity/components/buttons/default'
+import {ButtonProps} from '../buttons/types'
 
 // @todo: give a deprecation warning?
 // import styles from 'part:@sanity/components/toggles/button-style'
 
-import Button, {ButtonProps} from 'part:@sanity/components/buttons/default'
-
 const ToggleButton = forwardRef((props: Omit<ButtonProps, 'kind'>, ref) => {
   const {children, ...restProps} = props
 

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

@@ -1,18 +1,20 @@
 import {Path} from '@sanity/types'
 import {Placement} from '@popperjs/core'
 
+// Re-export Popper.js's `Placement` type
+export {Placement}
+
+// @todo: remove when @sanity/types has implemented this
 export interface Marker {
   path: Path
   type: string
   level?: string
   item: {message: string}
 }
 
-export {Placement}
-
-export interface MediaDimensions {
-  width?: number
-  height?: number
-  fit?: 'clip' | 'crop' | 'fill' | 'fillmax' | 'max' | 'scale' | 'min'
-  aspect?: number
-}
+export * from './autocomplete/types'
+export * from './buttons/types'
+export * from './dialogs/types'
+export * from './menus/types'
+export * from './previews/types'
+export * from './snackbar/types'

packages/@sanity/components/tsconfig.json

@@ -34,7 +34,7 @@
       "part:@sanity/components/dialogs/default": ["./dialogs/DefaultDialog"],
       "part:@sanity/components/dialogs/fullscreen": ["./dialogs/FullscreenDialog"],
       "part:@sanity/components/dialogs/fullscreen-message": ["./dialogs/FullscreenMessageDialog"],
-      "part:@sanity/components/dialogs/popover": ["./dialogs/PopOver"],
+      "part:@sanity/components/dialogs/popover": ["./dialogs/PopoverDialog"],
       "part:@sanity/components/dialogs/pane-popover": ["./dialogs/PanePopover"],
       "part:@sanity/components/edititem/fold": ["./edititem/EditItemFoldOut"],
       "part:@sanity/components/fieldsets/default": ["./fieldsets/DefaultFieldSet"],

packages/@sanity/default-layout/src/@types/parts.d.ts

@@ -307,6 +307,8 @@ declare module 'part:@sanity/components/dialogs/fullscreen' {
   export {default} from '@sanity/components/src/dialogs/FullscreenDialog'
 }
 
+declare module 'part:@sanity/components/dialogs/popover-style'
+
 declare module 'part:@sanity/components/lists/create-document' {
   export {default} from '@sanity/components/src/lists/CreateDocument'
 }

packages/@sanity/desk-tool/src/@types/parts.d.ts

@@ -378,7 +378,7 @@ declare module 'part:@sanity/components/dialogs/fullscreen' {
 
 declare module 'part:@sanity/components/dialogs/popover-style'
 declare module 'part:@sanity/components/dialogs/popover' {
-  export {default} from '@sanity/components/src/dialogs/PopOver'
+  export {default} from '@sanity/components/src/dialogs/PopoverDialog'
 }
 
 declare module 'part:@sanity/components/loading/spinner-style'