@sanity/ui 4.0.0-static.9 → 5.0.0-alpha.1

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

@@ -1,71 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,232 +0,0 @@
-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>
-  )
-}