@sanity/ui 3.0.0-static.4 → 3.0.0-static.40

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

@@ -0,0 +1,71 @@
+import {Box, Button, Dialog, LayerProvider, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {useEffect, useRef, useState} from 'react'
+
+export default function NestedStory(): React.JSX.Element {
+  const [open1] = useState(true)
+  const [open2, setOpen2] = useState(false)
+  const [open3, setOpen3] = useState(false)
+
+  const dialog2Button = useRef<HTMLButtonElement>(null)
+  const dialog3Button = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (!open2) dialog2Button.current?.focus()
+  }, [open2])
+
+  useEffect(() => {
+    if (!open3) dialog3Button.current?.focus()
+  }, [open3])
+
+  return (
+    <LayerProvider>
+      {open1 && (
+        <Dialog animate shadow={1} header="Dialog 1" id="dialog1">
+          <Box padding={4}>
+            <Button onClick={() => setOpen2(true)} ref={dialog2Button} text="Open Dialog 2" />
+          </Box>
+
+          {open2 && (
+            <Dialog
+              animate
+              shadow={2}
+              header="Dialog 2"
+              id="dialog2"
+              onClose={() => setOpen2(false)}
+              onClickOutside={() => setOpen2(false)}
+            >
+              <Box padding={4}>
+                <Button onClick={() => setOpen3(true)} ref={dialog3Button} text="Open Dialog 3" />
+              </Box>
+
+              {open3 && (
+                <Dialog
+                  animate
+                  shadow={4}
+                  header="Dialog 3"
+                  id="dialog3"
+                  onClose={() => setOpen3(false)}
+                  onClickOutside={() => setOpen3(false)}
+                >
+                  <Box padding={4}>
+                    <MenuButton
+                      button={<Button text="Test" />}
+                      id="menu3"
+                      popover={{animate: true, portal: true}}
+                      menu={
+                        <Menu>
+                          <MenuItem text="Test" />
+                          <MenuItem text="Test" />
+                        </Menu>
+                      }
+                    />
+                  </Box>
+                </Dialog>
+              )}
+            </Dialog>
+          )}
+        </Dialog>
+      )}
+    </LayerProvider>
+  )
+}

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

@@ -0,0 +1,51 @@
+import {Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
+import {useAction} from '@sanity/ui-workshop'
+import {useEffect, useRef} from 'react'
+
+export default function OnScrollStory(): React.JSX.Element {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const handleScroll = useAction('scroll')
+
+  useEffect(() => {
+    const el = ref.current
+
+    if (!el) return
+
+    el.addEventListener('scroll', handleScroll, {passive: true})
+
+    return () => el.removeEventListener('scroll', handleScroll)
+  }, [handleScroll])
+
+  return (
+    <LayerProvider>
+      <Dialog contentRef={ref} header="On scroll example" id="on-scroll-example">
+        <Stack gap={4} padding={4} paddingTop={1}>
+          <Text muted size={1}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
+            hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi
+            imperdiet quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis,
+            ex quam luctus felis, non ultrices enim sem vitae quam. Duis lorem velit, lacinia at
+            rhoncus a, tempus vel neque. Vestibulum ante ipsum primis in faucibus orci luctus et
+            ultrices posuere cubilia curae; Sed id mauris quam. Nam finibus sapien non lacinia
+            ultricies. Integer fermentum tortor at pellentesque faucibus. In venenatis commodo
+            placerat. Curabitur commodo tortor libero, vel pellentesque elit luctus sodales. Donec
+            mattis tristique nunc ac lacinia. Vestibulum non pulvinar turpis, posuere consequat
+            arcu. Fusce ut urna blandit, finibus nisi a, molestie elit. Nulla sed eleifend mi.
+          </Text>
+
+          <Text muted size={1}>
+            Aliquam quis finibus ex. Fusce semper lorem sed orci tempor gravida. Cras dui urna,
+            congue quis ipsum in, viverra facilisis libero. Vivamus vehicula libero quam, at posuere
+            leo ornare imperdiet. Cras eu neque eu tellus scelerisque iaculis ac id ex. Vestibulum
+            quam enim, lacinia ac ultricies at, molestie ut nisi. Vivamus vitae elit vel ante
+            feugiat iaculis. Pellentesque vel diam volutpat, luctus magna at, laoreet tellus.
+            Aliquam congue id nisi at sollicitudin. In sed nisi libero. Nulla ornare, mauris et
+            pulvinar hendrerit, ligula leo auctor enim, vestibulum laoreet metus nisl a nulla. Sed
+            et interdum sapien. Mauris lacinia interdum nisi quis ultrices. Etiam lobortis, dui
+            semper ornare fringilla, felis lacus feugiat dui, vitae rhoncus tellus tortor ut ipsum.
+          </Text>
+        </Stack>
+      </Dialog>
+    </LayerProvider>
+  )
+}

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

@@ -0,0 +1,89 @@
+import {
+  BoundaryElementProvider,
+  Box,
+  Button,
+  Card,
+  Dialog,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuItem,
+  PortalProvider,
+} from '@sanity/ui'
+import {useCallback, useState} from 'react'
+import {styled} from 'styled-components'
+
+export default function PanesStory(): React.JSX.Element {
+  return (
+    <Flex height="fill">
+      <Pane id="A" />
+      <Pane id="B" borderLeft />
+    </Flex>
+  )
+}
+
+const PaneRoot = styled(Card)`
+  position: relative;
+`
+
+const PanePortal = styled.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+
+  & > * {
+    pointer-events: auto;
+  }
+`
+
+function Pane(props: {borderLeft?: boolean; id: string}) {
+  const {borderLeft, id} = props
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
+  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  const handleClose = useCallback(() => {
+    setDialogOpen(false)
+  }, [])
+
+  return (
+    <BoundaryElementProvider element={element}>
+      <PortalProvider element={portalElement}>
+        <PaneRoot borderLeft={borderLeft} flex={1} ref={setElement}>
+          <Box padding={4}>
+            <Button onClick={() => setDialogOpen(true)} selected={dialogOpen} text="Open dialog" />
+          </Box>
+
+          <PanePortal ref={setPortalElement} />
+        </PaneRoot>
+
+        {dialogOpen && (
+          <Dialog
+            header={`Dialog ${id}`}
+            id={id}
+            onClickOutside={handleClose}
+            onClose={handleClose}
+            position="absolute"
+          >
+            <Box padding={4}>
+              <MenuButton
+                button={<Button text="Open menu" />}
+                id={`${id}-menu`}
+                menu={
+                  <Menu>
+                    <MenuItem text="Item 1" />
+                    <MenuItem text="Item 2" />
+                    <MenuItem text="Item 3" />
+                  </Menu>
+                }
+              />
+            </Box>
+          </Dialog>
+        )}
+      </PortalProvider>
+    </BoundaryElementProvider>
+  )
+}

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

@@ -0,0 +1,30 @@
+import {ArrowDownIcon, ArrowUpIcon} from '@sanity/icons'
+import {Box, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '$workshop'
+
+export default function PositionStory(): React.JSX.Element {
+  const open = useBoolean('Open', true)
+  const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS)
+
+  return (
+    <Box padding={4}>
+      <Box style={{padding: 'calc(100vh - 100px) 0'}}>
+        <Stack gap={3}>
+          <Text align="center">
+            <ArrowUpIcon />
+          </Text>
+          <Text align="center">Scrollable</Text>
+          <Text align="center">
+            <ArrowDownIcon />
+          </Text>
+        </Stack>
+
+        <LayerProvider>
+          {open && <Dialog header="Position example" id="position-example" position={position} />}
+        </LayerProvider>
+      </Box>
+    </Box>
+  )
+}

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

@@ -0,0 +1,77 @@
+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_CONTAINER_WIDTH_OPTIONS} from '$workshop'
+
+export default function PropsStory(): React.JSX.Element {
+  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)
+
+  const handleClose = useCallback(() => {
+    setOpen(false)
+    buttonRef.current?.focus()
+  }, [])
+
+  return (
+    <LayerProvider>
+      <Box padding={[4, 5, 6]}>
+        <Button
+          id="open-dialog-button"
+          onClick={() => setOpen(true)}
+          ref={buttonRef}
+          text="Open dialog"
+        />
+
+        {open && (
+          <Dialog
+            __unstable_hideCloseButton={hideCloseButton}
+            animate={animate}
+            header={header}
+            id="dialog"
+            onClickOutside={onClickOutside ? handleClose : undefined}
+            onClose={handleClose}
+            open={open}
+            width={width}
+          >
+            <Box padding={4}>
+              <Stack gap={4}>
+                <Text>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et orci vitae diam
+                  aliquet imperdiet.
+                </Text>
+                <Button id="button-1" text="Focus test" />
+                <Text>
+                  Sed in hendrerit metus. Sed sapien neque, imperdiet eu justo sed, vestibulum
+                  mollis dolor.
+                </Text>
+                <Button id="button-2" text="Focus test" />
+                <Text>
+                  Nulla sit amet ipsum ligula. Duis sit amet velit tempor, ultricies mauris
+                  dignissim, mollis enim.
+                </Text>
+                <Button id="button-3" text="Focus test" />
+                <Text>Cras quis elit non mauris faucibus molestie non non augue. </Text>
+                <Text>
+                  Proin suscipit gravida sodales. Morbi vel purus molestie, rhoncus augue sit amet,
+                  auctor justo.
+                </Text>
+                <Button id="button-4" text="Focus test" />
+                <Text>Proin lobortis nunc a tellus condimentum, a ultrices arcu egestas.</Text>
+                <Button id="button-5" text="Focus test" />
+                <Text>
+                  Suspendisse augue nibh, euismod sit amet sapien nec, molestie dignissim magna.
+                </Text>
+              </Stack>
+            </Box>
+          </Dialog>
+        )}
+      </Box>
+    </LayerProvider>
+  )
+}

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

@@ -0,0 +1,11 @@
+import {Dialog, DialogProvider} from '@sanity/ui'
+
+export default function ProviderStory(): React.JSX.Element {
+  return (
+    <DialogProvider position="absolute" zOffset={1000}>
+      <Dialog header="Outer" id="provider-example">
+        <Dialog header="Inner" id="nested-provider-example" />
+      </Dialog>
+    </DialogProvider>
+  )
+}

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

@@ -0,0 +1,76 @@
+import {Box, Button, Dialog, type DialogProps, LayerProvider, useLayer} from '@sanity/ui'
+import {type ReactNode, useCallback, useEffect, useRef, useState} from 'react'
+
+export default function WrappedStory(): React.JSX.Element {
+  return (
+    <LayerProvider zOffset={100}>
+      <Box padding={4}>
+        <DialogButton level={0} />
+      </Box>
+    </LayerProvider>
+  )
+}
+
+function DialogButton(props: {level: number}) {
+  const {level} = props
+  const [open, setOpen] = useState(false)
+
+  const openRef = useRef(open)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (openRef.current !== open) {
+      openRef.current = open
+
+      if (!open) {
+        // focus the button that opened the dialog
+        // buttonRef.current?.focus()
+      }
+    }
+  }, [open])
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} ref={buttonRef} text={`Open dialog ${level + 1}`} />
+
+      {open && (
+        <WrappedDialog
+          header={`WrappedDialog ${level + 1}`}
+          id={`wrapped-${level + 1}`}
+          onClickOutside={() => setOpen(false)}
+          onClose={() => setOpen(false)}
+        >
+          <Box padding={4}>
+            <DialogButton level={level + 1} />
+          </Box>
+        </WrappedDialog>
+      )}
+    </>
+  )
+}
+
+function WrappedDialog(props: DialogProps & {children?: ReactNode}) {
+  const layer = useLayer()
+  const isTopLayer = layer.size === 1
+
+  const dialogRef = useRef<HTMLDivElement>(null)
+
+  const [lastFocusedElement, setLastFocusedElement] = useState<HTMLElement | null>(null)
+
+  const handleContentFocus = useCallback(() => {
+    const containsActiveElement = dialogRef.current?.contains(document.activeElement)
+
+    if (containsActiveElement) {
+      setLastFocusedElement(document.activeElement as HTMLElement)
+    }
+  }, [])
+
+  // Set focus on the last focused element when the dialog becomes the top layer.
+  useEffect(() => {
+    if (isTopLayer && lastFocusedElement) {
+      lastFocusedElement.focus()
+    }
+  }, [isTopLayer, lastFocusedElement])
+
+  return <Dialog {...props} data-size={layer.size} onFocus={handleContentFocus} ref={dialogRef} />
+}

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

@@ -0,0 +1,232 @@
+import {
+  type ContainerStyleProps,
+  dialog,
+  dialogContainer,
+  type ResponsiveProp,
+} from '@sanity/ui/css'
+import type {CardTone, ColorScheme, Radius} from '@sanity/ui/theme'
+import {type FocusEvent, type ForwardedRef, type ReactNode, useCallback, useRef} from 'react'
+
+import {Z_OFFSETS} from '../../constants'
+import {isHTMLElement} from '../../helpers/element'
+import {focusFirstDescendant, focusLastDescendant} from '../../helpers/focus'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import {Container} from '../../primitives/container/container'
+import {Layer, type LayerOwnProps, type LayerProps} from '../../primitives/layer/layer'
+import type {ComponentType, Props} from '../../types'
+import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
+import {Portal} from '../../utils/portal/portal'
+import {usePortal} from '../../utils/portal/usePortal'
+import {DialogCard} from './dialogCard'
+import {isTargetWithinScope} from './isTargetWithinScope'
+import type {DialogPosition} from './types'
+import {useDialog} from './useDialog'
+
+/** @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?: ColorScheme
+    tone?: CardTone | 'inherit'
+    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 function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEMENT>(
+  props: DialogProps<E>,
+): React.JSX.Element {
+  const context = useDialog()
+  const {
+    __unstable_autoFocus: autoFocus = true,
+    __unstable_hideCloseButton: hideCloseButton = false,
+    animate: _animate = false,
+    cardRadius: cardRadiusProp = 4,
+    children,
+    className,
+    contentRef,
+    footer,
+    header,
+    id,
+    onActivate,
+    onClickOutside,
+    onClose,
+    onFocus,
+    padding = 3,
+    portal: portalProp,
+    position: _positionProp,
+    scheme,
+    shadow: cardShadow = 4,
+    width = 0,
+    zOffset: _zOffsetProp,
+    tone,
+    ...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 = 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)
+  const focusedElementRef = useRef<HTMLElement | null>(null)
+
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLDivElement>) => {
+      onFocus?.(event)
+
+      const target = event.target
+      const cardElement = cardRef.current
+
+      if (cardElement && target === preDivRef.current) {
+        focusLastDescendant(cardElement)
+
+        return
+      }
+
+      if (cardElement && target === postDivRef.current) {
+        focusFirstDescendant(cardElement)
+
+        return
+      }
+
+      if (isHTMLElement(event.target)) {
+        focusedElementRef.current = event.target
+      }
+    },
+    [onFocus],
+  )
+
+  const labelId = `${id}_label`
+
+  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.
+  // This is to allow the user to tab or close the dialog by pressing escape.
+  const handleRootClick = useCallback(() => {
+    if (rootClickTimeoutRef.current) {
+      clearTimeout(rootClickTimeoutRef.current)
+    }
+
+    rootClickTimeoutRef.current = setTimeout(() => {
+      const activeElement = document.activeElement
+
+      if (activeElement && !isTargetWithinScope(boundaryElement, portalElement, activeElement)) {
+        const target = focusedElementRef.current
+
+        if (!target || !document.body.contains(target)) {
+          // No previously focused element, or it's not in the document anymore
+          const cardElement = cardRef.current
+          if (cardElement) focusFirstDescendant(cardElement)
+
+          return
+        }
+
+        target.focus()
+      }
+    }, 0)
+  }, [boundaryElement, portalElement])
+
+  return (
+    <Portal __unstable_name={portalProp}>
+      <Layer
+        {...rest}
+        aria-labelledby={labelId}
+        aria-modal
+        className={dialog({className})}
+        data-animate={animate ? '' : undefined}
+        data-ui="Dialog"
+        display="flex"
+        id={id}
+        onActivate={onActivate}
+        onClick={handleRootClick}
+        onFocus={handleFocus}
+        padding={padding}
+        position={position}
+        role="dialog"
+        zOffset={zOffset}
+      >
+        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+        <div ref={preDivRef} tabIndex={0} />
+        <Container
+          alignItems="center"
+          className={dialogContainer()}
+          data-ui="DialogCard"
+          flexDirection="column"
+          display="flex"
+          justifyContent="center"
+          width={width}
+        >
+          <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>
+  )
+}