@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

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

@@ -0,0 +1,133 @@
+import {useState} from 'react'
+import {Stack, Flex, Button, Text} from '../../../primitives'
+import {Layer, LayerProvider} from '../../../utils'
+import {Menu, MenuButton, MenuItem} from '../../menu'
+import {Dialog} from '../dialog'
+
+export default function LayeringFocusStory() {
+  const [firstDialogOpen, setFirstDialogOpen] = useState<boolean>(false)
+  const [secondDialogOpen, setSecondDialogOpen] = useState<boolean>(false)
+  const [thirdDialogOpen, setThirdDialogOpen] = useState<boolean>(false)
+  const [fourthDialogOpen, setFourthDialogOpen] = useState<boolean>(false)
+
+  return (
+    <LayerProvider>
+      <Flex align="center" height="fill" justify="center">
+        <Layer onActivate={({activeElement}) => activeElement?.focus()}>
+          <Button
+            text="Open dialog 1"
+            onClick={() => setFirstDialogOpen(true)}
+            id="open-dialog-1-button"
+          />
+
+          {firstDialogOpen && (
+            <Dialog
+              header="Dialog 1"
+              id="1"
+              onActivate={({activeElement}) => activeElement?.focus()}
+              onClose={() => setFirstDialogOpen(false)}
+            >
+              <Stack space={2} padding={3}>
+                <Button
+                  mode="ghost"
+                  text="Open dialog 2"
+                  onClick={() => setSecondDialogOpen(true)}
+                  id="open-dialog-2-button-1"
+                />
+                <Button
+                  mode="ghost"
+                  text="Open dialog 2"
+                  onClick={() => setSecondDialogOpen(true)}
+                  id="open-dialog-2-button-2"
+                />
+                <Button
+                  mode="ghost"
+                  text="Open dialog 2"
+                  onClick={() => setSecondDialogOpen(true)}
+                  id="open-dialog-2-button-3"
+                />
+              </Stack>
+
+              {secondDialogOpen && (
+                <Dialog
+                  header="Dialog 2"
+                  id="2"
+                  onActivate={({activeElement}) => activeElement?.focus()}
+                  onClose={() => setSecondDialogOpen(false)}
+                >
+                  <Stack space={2} padding={3}>
+                    <Button
+                      mode="ghost"
+                      text="Open dialog 3"
+                      onClick={() => setThirdDialogOpen(true)}
+                      id="open-dialog-3-button-1"
+                    />
+                    <Button
+                      mode="ghost"
+                      text="Open dialog 3"
+                      onClick={() => setThirdDialogOpen(true)}
+                      id="open-dialog-3-button-2"
+                    />
+                    <Button
+                      mode="ghost"
+                      text="Open dialog 3"
+                      onClick={() => setThirdDialogOpen(true)}
+                      id="open-dialog-3-button-3"
+                    />
+                  </Stack>
+
+                  {thirdDialogOpen && (
+                    <Dialog
+                      header="Dialog 3"
+                      id="3"
+                      onActivate={({activeElement}) => activeElement?.focus()}
+                      onClose={() => setThirdDialogOpen(false)}
+                    >
+                      <Stack space={2} padding={3}>
+                        <MenuButton
+                          id="menu"
+                          button={
+                            <Button mode="ghost" text="Open menu" id="open-dialog-4-menu-button" />
+                          }
+                          menu={
+                            <Menu>
+                              <MenuItem
+                                text="Open dialog 4"
+                                onClick={() => setFourthDialogOpen(true)}
+                              />
+                              <MenuItem
+                                text="Open dialog 4"
+                                onClick={() => setFourthDialogOpen(true)}
+                              />
+                              <MenuItem
+                                text="Open dialog 4"
+                                onClick={() => setFourthDialogOpen(true)}
+                              />
+                            </Menu>
+                          }
+                        />
+                      </Stack>
+
+                      {fourthDialogOpen && (
+                        <Dialog
+                          header="Dialog 4"
+                          id="4"
+                          onActivate={({activeElement}) => activeElement?.focus()}
+                          onClose={() => setFourthDialogOpen(false)}
+                        >
+                          <Stack space={2} padding={3}>
+                            <Text>👋</Text>
+                          </Stack>
+                        </Dialog>
+                      )}
+                    </Dialog>
+                  )}
+                </Dialog>
+              )}
+            </Dialog>
+          )}
+        </Layer>
+      </Flex>
+    </LayerProvider>
+  )
+}

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

@@ -0,0 +1,41 @@
+import {Box, Card, Code, Dialog, Layer, LayerProvider, useLayer} from '@sanity/ui'
+import {useAction} from '@sanity/ui-workshop'
+
+export default function LayeringStory() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <LayerProvider>
+        <Layer zOffset={10} id="a">
+          <Card padding={2} shadow={2}>
+            <DebugLayer />
+          </Card>
+        </Layer>
+        <Layer zOffset={10} id="b">
+          <Card padding={2} shadow={2}>
+            <DebugLayer />
+          </Card>
+        </Layer>
+        <Dialog
+          header="Layering example"
+          id="layering-example"
+          onClose={useAction('onEscape')}
+          zOffset={100}
+        >
+          <Box padding={4}>
+            <DebugLayer />
+          </Box>
+        </Dialog>
+      </LayerProvider>
+    </Box>
+  )
+}
+
+function DebugLayer() {
+  const layer = useLayer()
+
+  return (
+    <Code language="json" size={1}>
+      {JSON.stringify(layer, null, 2)}
+    </Code>
+  )
+}

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

@@ -0,0 +1,81 @@
+import {useCallback, useState} from 'react'
+import styled from 'styled-components'
+import {Box, Button, Card, Flex} from '../../../primitives'
+import {BoundaryElementProvider, PortalProvider} from '../../../utils'
+import {Menu, MenuButton, MenuItem} from '../../menu'
+import {Dialog} from '../dialog'
+
+export default function PanesStory() {
+  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/dialog.tsx

@@ -0,0 +1,434 @@
+import {CloseIcon} from '@sanity/icons'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
+import styled from 'styled-components'
+import {
+  containsOrEqualsElement,
+  focusFirstDescendant,
+  focusLastDescendant,
+  isHTMLElement,
+} from '../../helpers'
+import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
+import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
+import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
+import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
+import {useTheme_v2} from '../../theme'
+import {DialogPosition, Radius} from '../../types'
+import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
+import {
+  animationDialogStyle,
+  AnimationDialogStyleProps,
+  dialogStyle,
+  responsiveDialogPositionStyle,
+  ResponsiveDialogPositionStyleProps,
+} from './styles'
+import {useDialog} from './useDialog'
+
+/**
+ * @public
+ */
+export interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {
+  /**
+   * @beta
+   */
+  __unstable_autoFocus?: boolean
+  /**
+   * @beta
+   */
+  __unstable_hideCloseButton?: boolean
+  cardRadius?: Radius | Radius[]
+  cardShadow?: number | number[]
+  contentRef?: React.ForwardedRef<HTMLDivElement>
+  footer?: React.ReactNode
+  header?: React.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
+  portal?: string
+  position?: DialogPosition | DialogPosition[]
+  scheme?: ThemeColorSchemeKey
+  zOffset?: number | number[]
+  /**
+   * Whether the dialog should animate in on mount.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
+}
+
+interface DialogCardProps extends ResponsiveWidthProps {
+  /**
+   * @beta
+   */
+  __unstable_autoFocus: boolean
+  /**
+   * @beta
+   */
+  __unstable_hideCloseButton: boolean
+  children: React.ReactNode
+  contentRef?: React.ForwardedRef<HTMLDivElement>
+  footer: React.ReactNode
+  header: React.ReactNode
+  id: string
+  onClickOutside?: () => void
+  onClose?: () => void
+  portal?: string
+  radius: Radius | Radius[]
+  scheme?: ThemeColorSchemeKey
+  shadow: number | number[]
+}
+
+function isTargetWithinScope(
+  boundaryElement: HTMLElement | null,
+  portalElement: HTMLElement | null,
+  target: Node,
+): boolean {
+  if (!boundaryElement || !portalElement) return true
+
+  return (
+    containsOrEqualsElement(boundaryElement, target) ||
+    containsOrEqualsElement(portalElement, target)
+  )
+}
+
+const Root = styled(Layer)<
+  ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps & AnimationDialogStyleProps
+>(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle)
+
+const DialogContainer = styled(Container)`
+  &:not([hidden]) {
+    display: flex;
+  }
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`
+
+const DialogCardRoot = styled(Card)`
+  &:not([hidden]) {
+    display: flex;
+  }
+  width: 100%;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+  overflow: clip;
+`
+
+const DialogLayout = styled(Flex)`
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+`
+
+const DialogHeader = styled(Box)`
+  position: relative;
+  z-index: 2;
+`
+
+const DialogContent = styled(Box)`
+  position: relative;
+  z-index: 1;
+  overflow: auto;
+  outline: none;
+`
+
+const DialogFooter = styled(Box)`
+  position: relative;
+  z-index: 3;
+`
+
+const DialogCard = forwardRef(function DialogCard(
+  props: DialogCardProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    __unstable_autoFocus: autoFocus,
+    __unstable_hideCloseButton: hideCloseButton,
+    children,
+    contentRef,
+    footer,
+    header,
+    id,
+    onClickOutside,
+    onClose,
+    portal: portalProp,
+    radius: radiusProp,
+    scheme,
+    shadow: shadowProp,
+    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 forwardedRef = useForwardedRef(ref)
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const localContentRef = 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
+
+  useEffect(() => {
+    if (!autoFocus) return
+
+    // On mount: focus the first focusable element
+    if (forwardedRef.current) {
+      focusFirstDescendant(forwardedRef.current)
+    }
+  }, [autoFocus, forwardedRef])
+
+  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],
+    ),
+  )
+
+  useClickOutside(
+    useCallback(
+      (event: MouseEvent) => {
+        if (!isTopLayer || !onClickOutside) return
+
+        const target = event.target as Node | null
+
+        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
+          // Ignore clicks outside of the scope
+          return
+        }
+
+        onClickOutside()
+      },
+      [boundaryElement, isTopLayer, onClickOutside, portalElement],
+    ),
+    [rootElement],
+  )
+
+  const setRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      setRootElement(el)
+      forwardedRef.current = el
+    },
+    [forwardedRef],
+  )
+
+  const setContentRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      localContentRef.current = el
+      if (typeof contentRef === 'function') contentRef(el)
+      else if (contentRef) contentRef.current = el
+    },
+    [contentRef],
+  )
+
+  return (
+    <DialogContainer data-ui="DialogCard" width={width}>
+      <DialogCardRoot radius={radius} ref={setRef} scheme={scheme} shadow={shadow}>
+        <DialogLayout direction="column">
+          {showHeader && (
+            <DialogHeader>
+              <Flex align="center" 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>
+            </DialogHeader>
+          )}
+
+          <DialogContent flex={1} ref={setContentRef} tabIndex={-1}>
+            {children}
+          </DialogContent>
+
+          {footer && <DialogFooter>{footer}</DialogFooter>}
+        </DialogLayout>
+      </DialogCardRoot>
+    </DialogContainer>
+  )
+})
+
+/**
+ * The Dialog component.
+ *
+ * @public
+ */
+export const Dialog = forwardRef(function Dialog(
+  props: DialogProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'id' | 'width'>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const dialog = useDialog()
+  const {layer} = useTheme_v2()
+  const {
+    __unstable_autoFocus: autoFocus = true,
+    __unstable_hideCloseButton: hideCloseButton = false,
+    cardRadius: cardRadiusProp = 4,
+    cardShadow = 3,
+    children,
+    contentRef,
+    footer,
+    header,
+    id,
+    onActivate,
+    onClickOutside,
+    onClose,
+    onFocus,
+    padding: paddingProp = 3,
+    portal: portalProp,
+    position: positionProp = dialog.position || 'fixed',
+    scheme,
+    width: widthProp = 0,
+    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
+    animate = false,
+    ...restProps
+  } = props
+  const portal = usePortal()
+  const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
+  const boundaryElement = useBoundaryElement().element
+  const cardRadius = useArrayProp(cardRadiusProp)
+  const padding = useArrayProp(paddingProp)
+  const position = useArrayProp(positionProp)
+  const width = useArrayProp(widthProp)
+  const zOffset = useArrayProp(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: React.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>()
+
+  // 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}>
+      <Root
+        {...restProps}
+        $padding={padding}
+        $position={position}
+        aria-labelledby={labelId}
+        aria-modal
+        data-ui="Dialog"
+        id={id}
+        onActivate={onActivate}
+        onClick={handleRootClick}
+        onFocus={handleFocus}
+        ref={ref}
+        role="dialog"
+        zOffset={zOffset}
+        animate={animate}
+      >
+        <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}
+          width={width}
+        >
+          {children}
+        </DialogCard>
+        <div ref={postDivRef} tabIndex={0} />
+      </Root>
+    </Portal>
+  )
+})