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

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

@@ -2,14 +2,14 @@ import {Box, Button, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useCallback, useRef, useState} from 'react'
 
-import {WORKSHOP_WIDTH_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '$workshop'
 
 export default function PropsStory() {
-  const animate = useBoolean('Animate', false, 'Props')
-  const header = useText('Header', 'Props example', 'Props')
-  const onClickOutside = useBoolean('Close when click outside', false, 'Props') || false
-  const hideCloseButton = useBoolean('Hide close button', false, 'Props') || false
-  const width = useSelect('Width', WORKSHOP_WIDTH_OPTIONS, 0, 'Props')
+  const animate = useBoolean('Animate', false)
+  const header = useText('Header', 'Props example')
+  const onClickOutside = useBoolean('Close when click outside', false)
+  const hideCloseButton = useBoolean('Hide close button', false)
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS)
   const [open, setOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement | null>(null)
 
@@ -40,7 +40,7 @@ export default function PropsStory() {
             width={width}
           >
             <Box padding={4}>
-              <Stack space={4}>
+              <Stack gap={4}>
                 <Text>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et orci vitae diam
                   aliquet imperdiet.

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

@@ -1,5 +1,5 @@
-import {Box, Button, Dialog, DialogProps, LayerProvider, useLayer} from '@sanity/ui'
-import {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
+import {Box, Button, Dialog, type DialogProps, LayerProvider, useLayer} from '@sanity/ui'
+import {type ReactNode, useCallback, useEffect, useRef, useState} from 'react'
 
 export default function WrappedStory() {
   return (

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

@@ -1,294 +1,87 @@
-import {CloseIcon} from '@sanity/icons'
 import {
-  composeClassNames,
-  ContainerStyleProps,
+  type ContainerStyleProps,
   dialog,
-  dialogCardRoot,
   dialogContainer,
-  dialogContent,
-  dialogFooter,
-  dialogHeader,
-  dialogLayout,
-  PaddingStyleProps,
-  RadiusStyleProps,
-  ResponsiveProp,
-  ShadowStyleProps,
+  type ResponsiveProp,
 } from '@sanity/ui/css'
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {type FocusEvent, type ForwardedRef, type ReactNode, useCallback, useRef} from 'react'
+
+import {Z_OFFSETS} from '../../constants'
+import {focusFirstDescendant, focusLastDescendant, isHTMLElement} from '../../helpers'
+import {usePrefersReducedMotion, useResponsiveProp} from '../../hooks'
+import {Container} from '../../primitives'
+import type {CardTone, ComponentType, DialogPosition, Props, Radius} from '../../types'
 import {
-  FocusEvent,
-  ForwardedRef,
-  forwardRef,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-} from 'react'
-
-import {useTheme_v2} from '../../_compat'
-import {
-  containsOrEqualsElement,
-  focusFirstDescendant,
-  focusLastDescendant,
-  isHTMLElement,
-} from '../../helpers'
-import {
-  useArrayProp,
-  useClickOutsideEvent,
-  useGlobalKeyDown,
-  usePrefersReducedMotion,
-} from '../../hooks'
-import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
-import {CardTone, DialogPosition, Props, Radius} from '../../types'
-import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
+  Layer,
+  type LayerOwnProps,
+  type LayerProps,
+  Portal,
+  useBoundaryElement,
+  usePortal,
+} from '../../utils'
+import {DialogCard} from './dialogCard'
+import {isTargetWithinScope} from './isTargetWithinScope'
 import {useDialog} from './useDialog'
 
-/**
- * @public
- */
-export interface DialogProps extends ContainerStyleProps, PaddingStyleProps, ShadowStyleProps {
-  /**
-   * @beta
-   */
-  __unstable_autoFocus?: boolean
-  /**
-   * @beta
-   */
-  __unstable_hideCloseButton?: boolean
-  /**
-   * Whether the dialog should animate in on mount.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
-  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, RadiusStyleProps, ShadowStyleProps {
-  /**
-   * @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
-  // radius: Radius | Radius[]
-  scheme?: ThemeColorSchemeKey
-  // shadow: number | number[]
-  tone?: CardTone
-}
-
-function isTargetWithinScope(
-  boundaryElement: HTMLElement | null,
-  portalElement: HTMLElement | null,
-  target: Node,
-): boolean {
-  if (!boundaryElement || !portalElement) return true
-
-  return (
-    containsOrEqualsElement(boundaryElement, target) ||
-    containsOrEqualsElement(portalElement, target)
-  )
-}
-
-const DialogCard = forwardRef(function DialogCard(
-  props: DialogCardProps,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    __unstable_autoFocus: autoFocus,
-    __unstable_hideCloseButton: hideCloseButton,
-    children,
-    contentRef: forwardedContentRef,
-    footer,
-    header,
-    id,
-    onClickOutside,
-    onClose,
-    portal: portalProp,
-    radius: radiusProp,
-    scheme,
-    shadow: shadowProp = 4,
-    tone,
-    width: widthProp,
-  } = props
-  const portal = usePortal()
-  const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
-  const boundaryElement = useBoundaryElement().element
-  const radius = useArrayProp(radiusProp)
-  const shadow = useArrayProp(shadowProp)
-  const width = useArrayProp(widthProp)
-  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 (
-    <Container
-      align="center"
-      className={dialogContainer()}
-      data-ui="DialogCard"
-      direction="column"
-      display="flex"
-      justify="center"
-      width={width}
-    >
-      <Card
-        className={dialogCardRoot()}
-        display="flex"
-        radius={radius}
-        ref={ref}
-        scheme={scheme}
-        shadow={shadow}
-        tone={tone}
-      >
-        <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>
-    </Container>
-  )
-})
-
-DialogCard.displayName = 'ForwardRef(DialogCard)'
+/** @public */
+export const DEFAULT_DIALOG_ELEMENT = 'div'
+
+/** @public */
+export type DialogOwnProps = ContainerStyleProps &
+  Omit<LayerOwnProps, 'width'> & {
+    /**
+     * @beta
+     */
+    __unstable_autoFocus?: boolean
+    /**
+     * @beta
+     */
+    __unstable_hideCloseButton?: boolean
+    /**
+     * Whether the dialog should animate in on mount.
+     *
+     * @beta
+     * @defaultValue false
+     */
+    animate?: boolean
+    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?: ResponsiveProp<DialogPosition>
+    scheme?: ThemeColorSchemeKey
+    tone?: CardTone
+    zOffset?: number | number[]
+  }
+
+/** @public */
+export type DialogElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type DialogProps<E extends DialogElementType = DialogElementType> = Props<DialogOwnProps, E>
 
 /**
  * The Dialog component.
  *
  * @public
  */
-export const Dialog = forwardRef(function Dialog(
-  props: Props<DialogProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEMENT>(
+  props: DialogProps<E>,
 ) {
   const context = useDialog()
-  const {layer} = useTheme_v2()
   const {
     __unstable_autoFocus: autoFocus = true,
     __unstable_hideCloseButton: hideCloseButton = false,
     animate: _animate = false,
     cardRadius: cardRadiusProp = 4,
-    // cardShadow = 3,
     children,
     className,
     contentRef,
@@ -303,23 +96,23 @@ export const Dialog = forwardRef(function Dialog(
     portal: portalProp,
     position: _positionProp,
     scheme,
-    shadow: cardShadow,
-    width: widthProp = 0,
+    shadow: cardShadow = 4,
+    width = 0,
     zOffset: _zOffsetProp,
     tone,
-    ...restProps
-  } = props
-  const positionProp = _positionProp ?? (context.position || 'fixed')
-  const zOffsetProp = _zOffsetProp ?? (context.zOffset || layer.dialog.zOffset)
+    ...rest
+  } = props as DialogProps<typeof DEFAULT_DIALOG_ELEMENT>
+
+  const positionProp = _positionProp ?? context.position ?? 'fixed'
+  const zOffsetProp = _zOffsetProp ?? context.zOffset ?? Z_OFFSETS.dialog
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
   const boundaryElement = useBoundaryElement().element
-  const cardRadius = useArrayProp(cardRadiusProp)
-  const position = useArrayProp(positionProp)
-  const width = useArrayProp(widthProp)
-  const zOffset = useArrayProp(zOffsetProp)
+  const cardRadius = useResponsiveProp(cardRadiusProp)
+  const position = useResponsiveProp(positionProp)
+  const zOffset = useResponsiveProp(zOffsetProp)
   const preDivRef = useRef<HTMLDivElement | null>(null)
   const postDivRef = useRef<HTMLDivElement | null>(null)
   const cardRef = useRef<HTMLDivElement | null>(null)
@@ -385,10 +178,10 @@ export const Dialog = forwardRef(function Dialog(
   return (
     <Portal __unstable_name={portalProp}>
       <Layer
-        {...restProps}
+        {...rest}
         aria-labelledby={labelId}
         aria-modal
-        className={composeClassNames(className, dialog())}
+        className={dialog({className})}
         data-animate={animate ? '' : undefined}
         data-ui="Dialog"
         display="flex"
@@ -398,36 +191,43 @@ export const Dialog = forwardRef(function Dialog(
         onFocus={handleFocus}
         padding={padding}
         position={position}
-        ref={ref}
         role="dialog"
         zOffset={zOffset}
       >
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
         <div ref={preDivRef} tabIndex={0} />
-        <DialogCard
-          __unstable_autoFocus={autoFocus}
-          __unstable_hideCloseButton={hideCloseButton}
-          contentRef={contentRef}
-          footer={footer}
-          header={header}
-          id={id}
-          onClickOutside={onClickOutside}
-          onClose={onClose}
-          portal={portalProp}
-          radius={cardRadius}
-          ref={cardRef}
-          scheme={scheme}
-          shadow={cardShadow}
-          tone={tone}
+        <Container
+          alignItems="center"
+          className={dialogContainer()}
+          data-ui="DialogCard"
+          flexDirection="column"
+          display="flex"
+          justifyContent="center"
           width={width}
         >
-          {children}
-        </DialogCard>
+          <DialogCard
+            __unstable_autoFocus={autoFocus}
+            __unstable_hideCloseButton={hideCloseButton}
+            contentRef={contentRef}
+            footer={footer}
+            header={header}
+            id={id}
+            onClickOutside={onClickOutside}
+            onClose={onClose}
+            portal={portalProp}
+            radius={cardRadius}
+            ref={cardRef}
+            scheme={scheme}
+            shadow={cardShadow}
+            tone={tone}
+            width={width}
+          >
+            {children}
+          </DialogCard>
+        </Container>
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
         <div ref={postDivRef} tabIndex={0} />
       </Layer>
     </Portal>
   )
-})
-
-Dialog.displayName = 'ForwardRef(Dialog)'
+}

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

@@ -0,0 +1,190 @@
+import {CloseIcon} from '@sanity/icons'
+import {dialogCard, dialogContent, dialogFooter, dialogHeader, dialogLayout} from '@sanity/ui/css'
+import {
+  type ForwardedRef,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+
+import {focusFirstDescendant} from '../../helpers'
+import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
+import {
+  Box,
+  Button,
+  Card,
+  type CardElementType,
+  type CardOwnProps,
+  Flex,
+  Text,
+} from '../../primitives'
+import type {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={dialogCard()} 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>
+  )
+}