@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

package/src/core/components/dialog/dialog.tsx

@@ -10,9 +10,23 @@ import {
   dialogHeader,
   dialogLayout,
   PaddingStyleProps,
+  RadiusStyleProps,
+  ResponsiveProp,
+  ShadowStyleProps,
 } from '@sanity/ui/css'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+import {
+  FocusEvent,
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+
+import {useTheme_v2} from '../../_compat'
 import {
   containsOrEqualsElement,
   focusFirstDescendant,
@@ -26,15 +40,14 @@ import {
   usePrefersReducedMotion,
 } from '../../hooks'
 import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
-import {useTheme_v2} from '../../theme'
-import {DialogPosition, Radius} from '../../types'
+import {CardTone, DialogPosition, Props, Radius} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
 import {useDialog} from './useDialog'
 
 /**
  * @public
  */
-export interface DialogProps extends PaddingStyleProps, ContainerStyleProps {
+export interface DialogProps extends ContainerStyleProps, PaddingStyleProps, ShadowStyleProps {
   /**
    * @beta
    */
@@ -50,23 +63,24 @@ export interface DialogProps extends PaddingStyleProps, ContainerStyleProps {
    * @defaultValue false
    */
   animate?: boolean
-  cardRadius?: Radius | Radius[]
-  cardShadow?: number | number[]
-  contentRef?: React.ForwardedRef<HTMLDivElement>
-  footer?: React.ReactNode
-  header?: React.ReactNode
+  cardRadius?: ResponsiveProp<Radius>
+  contentRef?: ForwardedRef<HTMLDivElement>
+  footer?: ReactNode
+  header?: ReactNode
   id: string
   /** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */
   onActivate?: LayerProps['onActivate']
   onClickOutside?: () => void
   onClose?: () => void
+  open?: boolean
   portal?: string
   position?: DialogPosition | DialogPosition[]
   scheme?: ThemeColorSchemeKey
+  tone?: CardTone
   zOffset?: number | number[]
 }
 
-interface DialogCardProps extends ContainerStyleProps {
+interface DialogCardProps extends ContainerStyleProps, RadiusStyleProps, ShadowStyleProps {
   /**
    * @beta
    */
@@ -75,17 +89,18 @@ interface DialogCardProps extends ContainerStyleProps {
    * @beta
    */
   __unstable_hideCloseButton: boolean
-  children: React.ReactNode
-  contentRef?: React.ForwardedRef<HTMLDivElement>
-  footer: React.ReactNode
-  header: React.ReactNode
+  children: ReactNode
+  contentRef?: ForwardedRef<HTMLDivElement>
+  footer: ReactNode
+  header: ReactNode
   id: string
   onClickOutside?: () => void
   onClose?: () => void
   portal?: string
-  radius: Radius | Radius[]
+  // radius: Radius | Radius[]
   scheme?: ThemeColorSchemeKey
-  shadow: number | number[]
+  // shadow: number | number[]
+  tone?: CardTone
 }
 
 function isTargetWithinScope(
@@ -103,7 +118,7 @@ function isTargetWithinScope(
 
 const DialogCard = forwardRef(function DialogCard(
   props: DialogCardProps,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+  forwardedRef: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     __unstable_autoFocus: autoFocus,
@@ -118,7 +133,8 @@ const DialogCard = forwardRef(function DialogCard(
     portal: portalProp,
     radius: radiusProp,
     scheme,
-    shadow: shadowProp,
+    shadow: shadowProp = 4,
+    tone,
     width: widthProp,
   } = props
   const portal = usePortal()
@@ -205,6 +221,7 @@ const DialogCard = forwardRef(function DialogCard(
         ref={ref}
         scheme={scheme}
         shadow={shadow}
+        tone={tone}
       >
         <Flex className={dialogLayout()} direction="column" flex={1}>
           {showHeader && (
@@ -261,17 +278,17 @@ DialogCard.displayName = 'ForwardRef(DialogCard)'
  * @public
  */
 export const Dialog = forwardRef(function Dialog(
-  props: DialogProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'id' | 'rows' | 'width' | 'wrap'>,
-  ref: React.Ref<HTMLDivElement>,
+  props: Props<DialogProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const context = useDialog()
   const {layer} = useTheme_v2()
   const {
     __unstable_autoFocus: autoFocus = true,
     __unstable_hideCloseButton: hideCloseButton = false,
+    animate: _animate = false,
     cardRadius: cardRadiusProp = 4,
-    cardShadow = 3,
+    // cardShadow = 3,
     children,
     className,
     contentRef,
@@ -284,13 +301,16 @@ export const Dialog = forwardRef(function Dialog(
     onFocus,
     padding = 3,
     portal: portalProp,
-    position: positionProp = context.position || 'fixed',
+    position: _positionProp,
     scheme,
+    shadow: cardShadow,
     width: widthProp = 0,
-    zOffset: zOffsetProp = context.zOffset || layer.dialog.zOffset,
-    animate: _animate = false,
+    zOffset: _zOffsetProp,
+    tone,
     ...restProps
   } = props
+  const positionProp = _positionProp ?? (context.position || 'fixed')
+  const zOffsetProp = _zOffsetProp ?? (context.zOffset || layer.dialog.zOffset)
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()
@@ -306,7 +326,7 @@ export const Dialog = forwardRef(function Dialog(
   const focusedElementRef = useRef<HTMLElement | null>(null)
 
   const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLDivElement>) => {
+    (event: FocusEvent<HTMLDivElement>) => {
       onFocus?.(event)
 
       const target = event.target
@@ -333,7 +353,7 @@ export const Dialog = forwardRef(function Dialog(
 
   const labelId = `${id}_label`
 
-  const rootClickTimeoutRef = useRef<NodeJS.Timeout>()
+  const rootClickTimeoutRef = useRef<NodeJS.Timeout>(undefined)
 
   // If the resulting active element (a.k.a. focused element) is not withing scope when clicking
   // within the dialog, then we want to focus the previously interactive element in the dialog instead.
@@ -382,6 +402,7 @@ export const Dialog = forwardRef(function Dialog(
         role="dialog"
         zOffset={zOffset}
       >
+        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
         <div ref={preDivRef} tabIndex={0} />
         <DialogCard
           __unstable_autoFocus={autoFocus}
@@ -397,10 +418,12 @@ export const Dialog = forwardRef(function Dialog(
           ref={cardRef}
           scheme={scheme}
           shadow={cardShadow}
+          tone={tone}
           width={width}
         >
           {children}
         </DialogCard>
+        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
         <div ref={postDivRef} tabIndex={0} />
       </Layer>
     </Portal>

package/src/core/components/dialog/dialogProvider.tsx

@@ -1,4 +1,5 @@
-import {useMemo} from 'react'
+import {ReactElement, ReactNode, useMemo} from 'react'
+
 import {DialogPosition} from '../../types'
 import {DialogContext, DialogContextValue} from './dialogContext'
 
@@ -7,7 +8,7 @@ import {DialogContext, DialogContextValue} from './dialogContext'
  * @beta
  */
 export interface DialogProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
   position?: DialogPosition | DialogPosition[]
   zOffset?: number | number[]
 }
@@ -16,7 +17,7 @@ export interface DialogProviderProps {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function DialogProvider(props: DialogProviderProps): React.ReactElement {
+export function DialogProvider(props: DialogProviderProps): ReactElement {
   const {children, position, zOffset} = props
 
   const contextValue: DialogContextValue = useMemo(

package/src/core/components/dialog/useDialog.ts

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {DialogContext, DialogContextValue} from './dialogContext'
 
 /**

package/src/core/components/hotkeys/hotkeys.tsx

@@ -1,15 +1,17 @@
-import {RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
 import {FontTextSize, Space} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {useArrayProp} from '../../hooks'
+import {ForwardedRef, forwardRef} from 'react'
+
 import {Box, Inline, KBD} from '../../primitives'
+import {Props} from '../../types'
 
 /**
  * @public
  */
-export interface HotkeysProps extends RadiusStyleProps {
+export interface HotkeysProps extends GapStyleProps, RadiusStyleProps {
   fontSize?: ResponsiveProp<FontTextSize>
   padding?: ResponsiveProp<Space>
+  /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
   keys?: string[]
 }
@@ -20,23 +22,27 @@ export interface HotkeysProps extends RadiusStyleProps {
  * @public
  */
 export const Hotkeys = forwardRef(function Hotkeys(
-  props: HotkeysProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'display' | 'height' | 'ref' | 'rows' | 'size' | 'width' | 'wrap'
-    >,
-  ref: React.Ref<HTMLDivElement>,
+  props: Props<HotkeysProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const {fontSize, keys, padding, radius, space: spaceProp = 0.5, ...restProps} = props
-  const space = useArrayProp(spaceProp)
+  const {fontSize, gap, gapX, gapY, keys, padding, radius, space = 1, ...restProps} = props
 
   if (!keys || keys.length === 0) {
     return <></>
   }
 
   return (
-    <Box as="kbd" data-ui="Hotkeys" {...restProps} display="flex" gap={spaceProp} ref={ref}>
-      <Inline as="span" space={space}>
+    <Box
+      as="kbd"
+      data-ui="Hotkeys"
+      {...restProps}
+      display="flex"
+      gap={gap ?? space}
+      gapX={gapX}
+      gapY={gapY}
+      ref={ref}
+    >
+      <Inline as="span" gap={gap}>
         {keys.map((key, i) => (
           <KBD display="block" fontSize={fontSize} key={i} padding={padding} radius={radius}>
             {key}

package/src/core/components/menu/__workshop__/asComponent.tsx

@@ -4,10 +4,11 @@ import {forwardRef} from 'react'
 const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.ReactElement {
+): React.JSX.Element {
   const {children, req, ...restProps} = props
 
   return (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
     <a data-required={req} {...restProps} href="#" ref={ref}>
       {children}
     </a>

package/src/core/components/menu/__workshop__/avatarMenu.tsx

@@ -1,4 +1,5 @@
 import {UsersIcon} from '@sanity/icons'
+
 import {Avatar, Badge, Box, Button, Flex, Text} from '../../../primitives'
 import {Hotkeys} from '../../hotkeys'
 import {Menu} from '../menu'

package/src/core/components/menu/__workshop__/constrainedInBoundary.tsx

@@ -12,6 +12,7 @@ import {
   Text,
 } from '@sanity/ui'
 import {useState} from 'react'
+
 import {MenuButtonProps} from '../menuButton'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {

package/src/core/components/menu/__workshop__/customSelectedState.tsx

@@ -1,5 +1,6 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {useSelect} from '@sanity/ui-workshop'
+
 import {Box, Button} from '../../../primitives'
 import {Menu} from '../menu'
 import {MenuButton} from '../menuButton'

package/src/core/components/menu/__workshop__/menuButton.tsx

@@ -13,7 +13,8 @@ import {
 } from '@sanity/ui'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useMemo} from 'react'
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
 
 export default function MenuButtonStory() {
   const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')

package/src/core/components/menu/__workshop__/shouldFocus.tsx

@@ -1,5 +1,6 @@
 import {useSelect} from '@sanity/ui-workshop'
 import {Fragment, useCallback, useState} from 'react'
+
 import {Button, Flex, Popover} from '../../../primitives'
 import {LayerProvider} from '../../../utils'
 import {Menu} from '../menu'

package/src/core/components/menu/__workshop__/tones.tsx

@@ -1,7 +1,9 @@
-import {SearchIcon} from '@sanity/icons'
+import {CubeIcon} from '@sanity/icons'
 import {Box, Card, LayerProvider, Menu, MenuItem} from '@sanity/ui'
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
 
 export default function TonesStory() {
   const disabled = useBoolean('Disabled', false, 'Props')
@@ -12,11 +14,9 @@ export default function TonesStory() {
       <Box padding={[4, 5, 6]}>
         <Card radius={3} shadow={3} tone={parentTone}>
           <Menu>
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Default" tone="default" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Primary" tone="primary" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Positive" tone="positive" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Caution" tone="caution" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Critical" tone="critical" />
+            {THEME_COLOR_STATE_TONES.map((tone) => (
+              <MenuItem disabled={disabled} icon={CubeIcon} key={tone} text={tone} tone={tone} />
+            ))}
           </Menu>
         </Card>
       </Box>

package/src/core/components/menu/menu.test.tsx

@@ -2,7 +2,8 @@
 
 /* eslint-disable no-console */
 
-import React, {useCallback, useMemo} from 'react'
+import {MouseEvent, useCallback, useMemo} from 'react'
+
 import {render} from '../../../../test'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenu} from './useMenu'
@@ -22,12 +23,12 @@ describe('components/menu', () => {
 
       function Root() {
         const handleItemMouseEnter = useCallback(
-          (event: React.MouseEvent<HTMLElement>) => console.log(event),
+          (event: MouseEvent<HTMLElement>) => console.log(event),
           [],
         )
 
         const handleItemMouseLeave = useCallback(
-          (event: React.MouseEvent<HTMLElement>) => console.log(event),
+          (event: MouseEvent<HTMLElement>) => console.log(event),
           [],
         )
 
@@ -79,7 +80,6 @@ describe('components/menu', () => {
       }
 
       function Root() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const value: any = undefined
 
         return (
@@ -109,7 +109,6 @@ describe('components/menu', () => {
 
       function Root() {
         // NOTE: we’re testing this because the context value may be a function in the future
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const value: any = () => {
           return {version: 1}
         }

package/src/core/components/menu/menu.tsx

@@ -1,8 +1,24 @@
-import {PaddingStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import {
+  composeClassNames,
+  GapStyleProps,
+  menu,
+  PaddingStyleProps,
+  ResponsiveProp,
+} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
+import {
+  ForwardedRef,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react'
+
 import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
 import {Box, Stack} from '../../primitives'
+import {Props} from '../../types'
 import {useLayer} from '../../utils'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenuController} from './useMenuController'
@@ -10,23 +26,26 @@ import {useMenuController} from './useMenuController'
 /**
  * @public
  */
-export interface MenuProps extends PaddingStyleProps {
+export interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps, 'gap'> {
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
-  focusFirst?: boolean
+  'focusFirst'?: boolean
   /**
    * @deprecated Use `shouldFocus="last"` instead.
    */
-  focusLast?: boolean
-  onClickOutside?: (event: MouseEvent) => void
-  onEscape?: () => void
-  onItemClick?: () => void
-  onItemSelect?: (index: number) => void
-  originElement?: HTMLElement | null
-  registerElement?: (el: HTMLElement) => () => void
-  shouldFocus?: 'first' | 'last' | null
-  space?: ResponsiveProp<Space>
+  'focusLast'?: boolean
+  'onClickOutside'?: (event: MouseEvent) => void
+  'onEscape'?: () => void
+  'onItemClick'?: () => void
+  'onItemSelect'?: (index: number) => void
+  'originElement'?: HTMLElement | null
+  'registerElement'?: (el: HTMLElement) => () => void
+  'shouldFocus'?: 'first' | 'last' | null
+  /** @deprecated Use `gap` property instead. */
+  'space'?: ResponsiveProp<Space>
+  'aria-labelledby'?: string
+  // 'onBlurCapture'?: (event: FocusEvent) => void
 }
 
 /**
@@ -35,19 +54,18 @@ export interface MenuProps extends PaddingStyleProps {
  * @public
  */
 export const Menu = forwardRef(function Menu(
-  props: MenuProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'height' | 'role' | 'rows' | 'tabIndex' | 'width' | 'wrap'
-    >,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+  props: Props<MenuProps, 'div'>,
+  forwardedRef: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     children,
+    className,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     focusFirst,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     focusLast,
+    gap,
+    // onBlurCapture,
     onClickOutside,
     onEscape,
     onItemClick,
@@ -56,10 +74,12 @@ export const Menu = forwardRef(function Menu(
     originElement,
     padding = 1,
     registerElement,
-    shouldFocus = (props.focusFirst && 'first') || (props.focusLast && 'last') || null,
+    shouldFocus: _shouldFocus,
     space = 1,
     ...restProps
   } = props
+  const shouldFocus =
+    _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || null)
 
   const ref = useRef<HTMLDivElement | null>(null)
 
@@ -74,7 +94,12 @@ export const Menu = forwardRef(function Menu(
     handleItemMouseLeave,
     handleKeyDown,
     mount,
-  } = useMenuController({onKeyDown, originElement, shouldFocus, rootElementRef: ref})
+  } = useMenuController({
+    onKeyDown,
+    originElement,
+    shouldFocus,
+    rootElementRef: ref,
+  })
 
   const unregisterElementRef = useRef<(() => void) | null>(null)
   const handleRefChange = useCallback(
@@ -157,6 +182,7 @@ export const Menu = forwardRef(function Menu(
       <Box
         data-ui="Menu"
         {...restProps}
+        className={composeClassNames(className, menu())}
         onKeyDown={handleKeyDown}
         overflow="auto"
         outline="none"
@@ -165,9 +191,10 @@ export const Menu = forwardRef(function Menu(
         role="menu"
         tabIndex={-1}
       >
-        <Stack space={space}>{children}</Stack>
+        <Stack gap={gap ?? space}>{children}</Stack>
       </Box>
     </MenuContext.Provider>
   )
 })
+
 Menu.displayName = 'ForwardRef(Menu)'