@sanity/ui 3.0.0-static.11 → 3.0.0-static.13

package/src/ui/components/dialog/dialogCard.tsx

@@ -0,0 +1,183 @@
+import {CloseIcon} from '@sanity/icons'
+import {
+  dialogCardRoot,
+  dialogContent,
+  dialogFooter,
+  dialogHeader,
+  dialogLayout,
+} from '@sanity/ui/css'
+import {ForwardedRef, ReactNode, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+
+import {focusFirstDescendant} from '../../helpers'
+import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
+import {Box, Button, Card, CardElementType, CardOwnProps, Flex, Text} from '../../primitives'
+import {Props} from '../../types'
+import {useBoundaryElement, useLayer, usePortal} from '../../utils'
+import {isTargetWithinScope} from './isTargetWithinScope'
+
+/** @internal */
+export const DEFAULT_DIALOG_CARD_ELEMENT = 'div'
+
+/** @internal */
+export type DialogCardOwnProps = CardOwnProps & {
+  /**
+   * @beta
+   */
+  __unstable_autoFocus: boolean
+  /**
+   * @beta
+   */
+  __unstable_hideCloseButton: boolean
+  children: ReactNode
+  contentRef?: ForwardedRef<HTMLDivElement>
+  footer: ReactNode
+  header: ReactNode
+  id: string
+  onClickOutside?: () => void
+  onClose?: () => void
+  portal?: string
+}
+
+/** @internal */
+export type DialogCardElementType = CardElementType
+
+/** @internal */
+export type DialogCardProps<E extends DialogCardElementType = DialogCardElementType> = Props<
+  DialogCardOwnProps,
+  E
+>
+
+/** @internal */
+
+export function DialogCard<E extends DialogCardElementType = typeof DEFAULT_DIALOG_CARD_ELEMENT>(
+  props: DialogCardProps<E>,
+) {
+  const {
+    __unstable_autoFocus: autoFocus,
+    __unstable_hideCloseButton: hideCloseButton,
+    as = DEFAULT_DIALOG_CARD_ELEMENT,
+    children,
+    contentRef: forwardedContentRef,
+    footer,
+    header,
+    id,
+    onClickOutside,
+    onClose,
+    portal: portalProp,
+    ref: forwardedRef,
+    ...rest
+  } = props as DialogCardProps<typeof DEFAULT_DIALOG_CARD_ELEMENT>
+
+  const portal = usePortal()
+  const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
+  const boundaryElement = useBoundaryElement().element
+  const ref = useRef<HTMLDivElement | null>(null)
+  const contentRef = useRef<HTMLDivElement | null>(null)
+  const layer = useLayer()
+  const {isTopLayer} = layer
+  const labelId = `${id}_label`
+  const showCloseButton = Boolean(onClose) && hideCloseButton === false
+  const showHeader = Boolean(header) || showCloseButton
+
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
+    forwardedContentRef,
+    () => contentRef.current,
+  )
+
+  useEffect(() => {
+    if (!autoFocus) return
+
+    // On mount: focus the first focusable element
+    if (ref.current) {
+      focusFirstDescendant(ref.current)
+    }
+  }, [autoFocus, ref])
+
+  useGlobalKeyDown(
+    useCallback(
+      (event: KeyboardEvent) => {
+        if (!isTopLayer || !onClose) return
+
+        const target = document.activeElement
+
+        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
+          // Ignore key presses when the focused element is outside of scope
+          return
+        }
+
+        if (event.key === 'Escape') {
+          event.preventDefault()
+          event.stopPropagation()
+          onClose()
+        }
+      },
+      [boundaryElement, isTopLayer, onClose, portalElement],
+    ),
+  )
+
+  useClickOutsideEvent(
+    isTopLayer &&
+      onClickOutside &&
+      ((event) => {
+        const target = event.target as Node | null
+
+        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
+          // Ignore clicks outside of the scope
+          return
+        }
+
+        onClickOutside()
+      }),
+    () => [ref.current],
+  )
+
+  return (
+    <Card {...rest} as={as} className={dialogCardRoot()} display="flex" ref={ref}>
+      <Flex className={dialogLayout()} direction="column" flex={1}>
+        {showHeader && (
+          <Box className={dialogHeader()} position="relative">
+            <Flex align="flex-start" padding={3}>
+              <Box flex={1} padding={2}>
+                {header && (
+                  <Text id={labelId} size={1} weight="semibold">
+                    {header}
+                  </Text>
+                )}
+              </Box>
+              {showCloseButton && (
+                <Box flex="none">
+                  <Button
+                    aria-label="Close dialog"
+                    disabled={!onClose}
+                    icon={CloseIcon}
+                    mode="bleed"
+                    onClick={onClose}
+                    padding={2}
+                  />
+                </Box>
+              )}
+            </Flex>
+          </Box>
+        )}
+        <Box
+          className={dialogContent()}
+          flex={1}
+          overflow="auto"
+          position="relative"
+          ref={contentRef}
+          tabIndex={-1}
+        >
+          {children}
+        </Box>
+        {footer && (
+          <Box className={dialogFooter()} position="relative">
+            {footer}
+          </Box>
+        )}
+      </Flex>
+    </Card>
+  )
+}
+
+DialogCard.displayName = 'DialogCard'

package/src/ui/components/dialog/isTargetWithinScope.ts

@@ -0,0 +1,14 @@
+import {containsOrEqualsElement} from '../../helpers'
+
+export function isTargetWithinScope(
+  boundaryElement: HTMLElement | null,
+  portalElement: HTMLElement | null,
+  target: Node,
+): boolean {
+  if (!boundaryElement || !portalElement) return true
+
+  return (
+    containsOrEqualsElement(boundaryElement, target) ||
+    containsOrEqualsElement(portalElement, target)
+  )
+}

package/src/ui/components/hotkeys/hotkeys.tsx

@@ -1,14 +1,14 @@
 import {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
 import {FontTextSize, Space} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef} from 'react'
 
 import {Box, KBD} from '../../primitives'
-import {Props} from '../../types'
+import {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface HotkeysProps extends GapStyleProps, RadiusStyleProps {
+/** @public */
+export const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
+
+/** @public */
+export interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
   fontSize?: ResponsiveProp<FontTextSize>
   padding?: ResponsiveProp<Space>
   /** @deprecated Use `gap` instead. */
@@ -16,16 +16,35 @@ export interface HotkeysProps extends GapStyleProps, RadiusStyleProps {
   keys?: string[]
 }
 
+/** @public */
+export type HotkeysElementType = 'kbd' | ComponentType
+
+/** @public */
+export type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Props<
+  HotkeysOwnProps,
+  E
+>
+
 /**
  * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
  *
  * @public
  */
-export const Hotkeys = forwardRef(function Hotkeys(
-  props: Props<HotkeysProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_ELEMENT>(
+  props: HotkeysProps<E>,
 ) {
-  const {fontSize, gap, gapX, gapY, keys, padding, radius, space = 0.5, ...restProps} = props
+  const {
+    as = DEFAULT_HOTKEYS_ELEMENT,
+    fontSize,
+    gap,
+    gapX,
+    gapY,
+    keys,
+    padding,
+    radius,
+    space = 0.5,
+    ...rest
+  } = props as HotkeysProps<typeof DEFAULT_HOTKEYS_ELEMENT>
 
   if (!keys || keys.length === 0) {
     return undefined
@@ -33,14 +52,13 @@ export const Hotkeys = forwardRef(function Hotkeys(
 
   return (
     <Box
-      as="kbd"
+      as={as}
       data-ui="Hotkeys"
-      {...restProps}
+      {...rest}
       display="flex"
       gap={gap ?? space}
       gapX={gapX}
       gapY={gapY}
-      ref={ref}
     >
       {keys.map((key, i) => (
         <KBD fontSize={fontSize} key={i} padding={padding} radius={radius}>
@@ -49,6 +67,6 @@ export const Hotkeys = forwardRef(function Hotkeys(
       ))}
     </Box>
   )
-})
+}
 
-Hotkeys.displayName = 'ForwardRef(Hotkeys)'
+Hotkeys.displayName = 'Hotkeys'

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

@@ -5,11 +5,11 @@ const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
 ): React.JSX.Element {
-  const {children, req, ...restProps} = props
+  const {children, req, ...rest} = props
 
   return (
     // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <a data-required={req} {...restProps} href="#" ref={ref}>
+    <a data-required={req} {...rest} href="#" ref={ref}>
       {children}
     </a>
   )
@@ -25,16 +25,16 @@ export default function AsComponentStory() {
         id="test"
         menu={
           <Menu>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="1">
               <Text>Component 1</Text>
             </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="2">
               <Text>Component 2</Text>
             </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="3">
               <Text>Component 3</Text>
             </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="4">
               <Text>Component 3</Text>
             </MenuItem>
           </Menu>

package/src/ui/components/menu/menu.tsx

@@ -1,32 +1,19 @@
-import {
-  composeClassNames,
-  GapStyleProps,
-  menu,
-  PaddingStyleProps,
-  ResponsiveProp,
-} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {
-  ForwardedRef,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react'
+import {composeClassNames, menu, type PaddingStyleProps, type ResponsiveProp} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
+import {useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
 
 import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
 import {Box, Stack} from '../../primitives'
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {useLayer} from '../../utils'
-import {MenuContext, MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './menuContext'
 import {useMenuController} from './useMenuController'
 
-/**
- * @public
- */
-export interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps, 'gap'> {
+/** @public */
+export const DEFAULT_MENU_ELEMENT = 'div'
+
+/** @public */
+export type MenuOwnProps = PaddingStyleProps & {
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
@@ -35,6 +22,7 @@ export interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps, 'gap'>
    * @deprecated Use `shouldFocus="last"` instead.
    */
   'focusLast'?: boolean
+  'gap'?: ResponsiveProp<Space>
   'onClickOutside'?: (event: MouseEvent) => void
   'onEscape'?: () => void
   'onItemClick'?: () => void
@@ -48,16 +36,20 @@ export interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps, 'gap'>
   // 'onBlurCapture'?: (event: FocusEvent) => void
 }
 
+/** @public */
+export type MenuElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type MenuProps<E extends MenuElementType = MenuElementType> = Props<MenuOwnProps, E>
+
 /**
  * The `Menu` component is a building block for application menus.
  *
  * @public
  */
-export const Menu = forwardRef(function Menu(
-  props: Props<MenuProps, 'div'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
-) {
+export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(props: MenuProps<E>) {
   const {
+    as = DEFAULT_MENU_ELEMENT,
     children,
     className,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -65,7 +57,6 @@ export const Menu = forwardRef(function Menu(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     focusLast,
     gap,
-    // onBlurCapture,
     onClickOutside,
     onEscape,
     onItemClick,
@@ -73,11 +64,13 @@ export const Menu = forwardRef(function Menu(
     onKeyDown,
     originElement,
     padding = 1,
+    ref: forwardedRef,
     registerElement,
     shouldFocus: _shouldFocus,
     space = 1,
-    ...restProps
-  } = props
+    ...rest
+  } = props as MenuProps<typeof DEFAULT_MENU_ELEMENT>
+
   const shouldFocus =
     _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || null)
 
@@ -181,7 +174,8 @@ export const Menu = forwardRef(function Menu(
     <MenuContext.Provider value={value}>
       <Box
         data-ui="Menu"
-        {...restProps}
+        {...rest}
+        as={as}
         className={composeClassNames(className, menu())}
         onKeyDown={handleKeyDown}
         overflow="auto"
@@ -195,6 +189,6 @@ export const Menu = forwardRef(function Menu(
       </Box>
     </MenuContext.Provider>
   )
-})
+}
 
-Menu.displayName = 'ForwardRef(Menu)'
+Menu.displayName = 'Menu'

package/src/ui/components/menu/menuButton.tsx

@@ -3,7 +3,6 @@ import {
   cloneElement,
   FocusEvent,
   ForwardedRef,
-  forwardRef,
   KeyboardEvent,
   MouseEvent as ReactMouseEvent,
   ReactElement,
@@ -19,10 +18,8 @@ import {ButtonProps, Popover, PopoverProps} from '../../primitives'
 import {Placement, Props, Radius} from '../../types'
 import {MenuProps} from './menu'
 
-/**
- * @public
- */
-export interface MenuButtonProps {
+/** @public */
+export type MenuButtonProps = {
   /**
    * @beta Do not use in production.
    */
@@ -31,7 +28,7 @@ export interface MenuButtonProps {
    * @deprecated Use `popover={{boundaryElement: element}}` instead.
    */
   boundaryElement?: HTMLElement
-  button: ReactElement<Props<ButtonProps, 'button'>>
+  button: ReactElement<ButtonProps>
   id: string
   menu?: ReactElement
   onClose?: () => void
@@ -58,6 +55,7 @@ export interface MenuButtonProps {
    * @deprecated Use `popover={{preventOverflow: true}}` instead.
    */
   preventOverflow?: boolean
+  ref?: ForwardedRef<HTMLButtonElement | null>
 }
 
 /**
@@ -65,10 +63,7 @@ export interface MenuButtonProps {
  *
  * @public
  */
-export const MenuButton = forwardRef(function MenuButton(
-  props: MenuButtonProps,
-  forwardedRef: ForwardedRef<HTMLButtonElement | null>,
-) {
+export function MenuButton(props: MenuButtonProps) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = false,
     boundaryElement: deprecated_boundaryElement,
@@ -83,6 +78,7 @@ export const MenuButton = forwardRef(function MenuButton(
     popover,
     popoverRadius: deprecated_popoverRadius,
     preventOverflow: deprecated_preventOverflow,
+    ref: forwardedRef,
   } = props
   const [open, setOpen] = useState(false)
   const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)
@@ -221,7 +217,7 @@ export const MenuButton = forwardRef(function MenuButton(
   const button = useMemo(() => {
     if (!buttonProp) return null
 
-    const buttonProps = {
+    const buttonProps: ButtonProps<'button'> = {
       'data-ui': 'MenuButton',
       id,
       'onClick': handleButtonClick,
@@ -231,7 +227,7 @@ export const MenuButton = forwardRef(function MenuButton(
       'aria-expanded': open,
       'ref': setButtonElement,
       'selected': buttonProp.props.selected ?? open,
-    } satisfies Props<ButtonProps, 'button'> & {ref: ForwardedRef<HTMLButtonElement>}
+    }
 
     return cloneElement(buttonProp, buttonProps)
   }, [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open])
@@ -270,6 +266,6 @@ export const MenuButton = forwardRef(function MenuButton(
       {button || <></>}
     </Popover>
   )
-})
+}
 
-MenuButton.displayName = 'ForwardRef(MenuButton)'
+MenuButton.displayName = 'MenuButton'

package/src/ui/components/menu/menuDivider.tsx

@@ -1,22 +1,34 @@
 import {composeClassNames, menuDivider} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
 
-import {Props} from '../../types'
+import {ComponentType, Props} from '../../types'
+
+/** @public */
+export const DEFAULT_MENU_DIVIDER_ELEMENT = 'hr'
 
 /** @public */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface MenuDividerProps {}
-
-/**
- * @public
- */
-export const MenuDivider = forwardRef(function MenuDivider(
-  props: Props<MenuDividerProps, 'div'>,
-  ref: ForwardedRef<HTMLHRElement>,
+export type MenuDividerOwnProps = {}
+
+/** @public */
+export type MenuDividerElementType = 'div' | 'hr' | 'span' | ComponentType
+
+/** @public */
+export type MenuDividerProps<E extends MenuDividerElementType = MenuDividerElementType> = Props<
+  MenuDividerOwnProps,
+  E
+>
+
+/** @public */
+export function MenuDivider<E extends MenuDividerElementType = typeof DEFAULT_MENU_DIVIDER_ELEMENT>(
+  props: MenuDividerProps<E>,
 ) {
-  const {className, ...restProps} = props
+  const {
+    as: Element = DEFAULT_MENU_DIVIDER_ELEMENT,
+    className,
+    ...rest
+  } = props as MenuDividerProps<typeof DEFAULT_MENU_DIVIDER_ELEMENT>
 
-  return <hr {...restProps} className={composeClassNames(className, menuDivider())} ref={ref} />
-})
+  return <Element {...rest} className={composeClassNames(className, menuDivider())} />
+}
 
 MenuDivider.displayName = 'MenuDivider'