@sanity/ui 1.1.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -49,11 +49,11 @@
     "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "1.1.1",
+    "@floating-ui/react-dom": "1.2.2",
     "@sanity/color": "^2.2.2",
     "@sanity/icons": "^2.2.2",
     "csstype": "^3.1.1",
-    "framer-motion": "^8.5.2",
+    "framer-motion": "^9.0.0",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
@@ -70,7 +70,7 @@
     "@testing-library/dom": "^8.20.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.6",
+    "@types/jest": "^29.4.0",
     "@types/jest-axe": "^3.5.5",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
@@ -79,26 +79,26 @@
     "@types/refractor": "^3.0.2",
     "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
     "commitizen": "^4.3.0",
-    "cypress": "^12.4.0",
+    "cypress": "^12.5.0",
     "cypress-real-events": "^1.7.6",
     "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.17.4",
+    "esbuild": "^0.17.5",
     "esbuild-register": "^3.4.2",
-    "eslint": "^8.32.0",
+    "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^29.4.0",
+    "jest": "^29.4.1",
     "jest-axe": "^7.0.0",
-    "jest-environment-jsdom": "^29.4.0",
+    "jest-environment-jsdom": "^29.4.1",
     "lint-staged": "^13.1.0",
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
@@ -107,11 +107,11 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rimraf": "^4.1.2",
-    "semantic-release": "^20.0.4",
+    "semantic-release": "^20.1.0",
     "start-server-and-test": "^1.15.3",
     "styled-components": "^5.3.6",
     "tsconfig-paths": "^4.1.2",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
     "react": "^18",
@@ -146,7 +146,7 @@
       "prettier --write --cache --ignore-unknown"
     ]
   },
-  "packageManager": "pnpm@7.26.0",
+  "packageManager": "pnpm@7.26.3",
   "publishConfig": {
     "access": "public"
   },

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

@@ -0,0 +1,134 @@
+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)}
+            tone="primary"
+            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/components/dialog/__workshop__/index.ts

@@ -12,5 +12,8 @@ export default defineScope({
     {name: 'position', title: 'Position', component: lazy(() => import('./position'))},
     {name: 'provider', title: 'Provider', component: lazy(() => import('./provider'))},
     {name: 'auto-focus', title: 'AutoFocus', component: lazy(() => import('./autoFocus'))},
+    {name: 'panes', title: 'Panes', component: lazy(() => import('./panes'))},
+    {name: 'activate', title: 'Activate', component: lazy(() => import('./activate'))},
+    {name: 'wrapped', title: 'Wrapped', component: lazy(() => import('./wrapped'))},
   ],
 })

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

@@ -1,23 +1,34 @@
 import {Box, Button, Dialog, LayerProvider, Menu, MenuButton, MenuItem} from '@sanity/ui'
-import {useState} from 'react'
+import {useEffect, useRef, useState} from 'react'
 
 export default function NestedStory() {
   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 cardShadow={1} header="Dialog 1" id="dialog1">
           <Box padding={4}>
-            <Button onClick={() => setOpen2(true)} text="Open Dialog 2" />
+            <Button onClick={() => setOpen2(true)} ref={dialog2Button} text="Open Dialog 2" />
           </Box>
 
           {open2 && (
             <Dialog cardShadow={2} header="Dialog 2" id="dialog2" onClose={() => setOpen2(false)}>
               <Box padding={4}>
-                <Button onClick={() => setOpen3(true)} text="Open Dialog 3" />
+                <Button onClick={() => setOpen3(true)} ref={dialog3Button} text="Open Dialog 3" />
               </Box>
 
               {open3 && (

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

@@ -0,0 +1,86 @@
+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"
+              tone="primary"
+            />
+          </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" tone="primary" />}
+                id={`${id}-menu`}
+                menu={
+                  <Menu>
+                    <MenuItem text="Item 1" />
+                    <MenuItem text="Item 2" />
+                    <MenuItem text="Item 3" />
+                  </Menu>
+                }
+              />
+            </Box>
+          </Dialog>
+        )}
+      </PortalProvider>
+    </BoundaryElementProvider>
+  )
+}

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

@@ -0,0 +1,78 @@
+import {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
+import {Box, Button} from '../../../primitives'
+import {LayerProvider, useLayer} from '../../../utils'
+import {Dialog, DialogProps} from '../dialog'
+
+export default function WrappedStory() {
+  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/components/dialog/dialog.tsx

@@ -1,14 +1,19 @@
 import {CloseIcon} from '@sanity/icons'
 import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
-import {focusFirstDescendant, focusLastDescendant} from '../../helpers'
+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 {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {DialogPosition} from '../../types'
-import {Layer, Portal, useLayer} from '../../utils'
+import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
 import {
   dialogStyle,
   responsiveDialogPositionStyle,
@@ -34,6 +39,8 @@ export interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProp
   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
@@ -58,11 +65,25 @@ interface DialogCardProps extends ResponsiveWidthProps {
   id: string
   onClickOutside?: () => void
   onClose?: () => void
+  portal?: string
   radius: number | number[]
   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>(
   responsivePaddingStyle,
   dialogStyle,
@@ -138,11 +159,15 @@ const DialogCard = forwardRef(function DialogCard(
     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)
@@ -158,7 +183,7 @@ const DialogCard = forwardRef(function DialogCard(
   useEffect(() => {
     if (!autoFocus) return
 
-    // On mount: focus the first interactive element in the contents
+    // On mount: focus the first focusable element
     if (forwardedRef.current) {
       focusFirstDescendant(forwardedRef.current)
     }
@@ -169,22 +194,39 @@ const DialogCard = forwardRef(function DialogCard(
       (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()
         }
       },
-      [isTopLayer, onClose]
+      [boundaryElement, isTopLayer, onClose, portalElement]
     )
   )
 
   useClickOutside(
-    useCallback(() => {
-      if (!isTopLayer || !onClickOutside) return
+    useCallback(
+      (event: MouseEvent) => {
+        if (!isTopLayer || !onClickOutside) return
+
+        const target = event.target as Node | null
 
-      onClickOutside()
-    }, [isTopLayer, onClickOutside]),
+        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
+          // Ignore clicks outside of the scope
+          return
+        }
+
+        onClickOutside()
+      },
+      [boundaryElement, isTopLayer, onClickOutside, portalElement]
+    ),
     [rootElement]
   )
 
@@ -265,16 +307,21 @@ export const Dialog = forwardRef(function Dialog(
     footer,
     header,
     id,
+    onActivate,
     onClickOutside,
     onClose,
+    onFocus,
     padding: paddingProp = 4,
-    portal,
+    portal: portalProp,
     position: positionProp = dialog.position || 'fixed',
     scheme,
     width: widthProp = 0,
     zOffset: zOffsetProp = dialog.zOffset || theme.sanity.layer?.dialog.zOffset,
     ...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)
@@ -283,32 +330,67 @@ export const Dialog = forwardRef(function Dialog(
   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>) => {
-    const target = event.target
-    const cardElement = cardRef.current
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLDivElement>) => {
+      onFocus?.(event)
 
-    if (!cardElement) {
-      return
-    }
+      const target = event.target
+      const cardElement = cardRef.current
 
-    if (target === preDivRef.current) {
-      focusLastDescendant(cardElement)
+      if (cardElement && target === preDivRef.current) {
+        focusLastDescendant(cardElement)
 
-      return
-    }
+        return
+      }
 
-    if (target === postDivRef.current) {
-      focusFirstDescendant(cardElement)
+      if (cardElement && target === postDivRef.current) {
+        focusFirstDescendant(cardElement)
 
-      return
-    }
-  }, [])
+        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={portal}>
+    <Portal __unstable_name={portalProp}>
       <Root
         {...restProps}
         $padding={padding}
@@ -317,6 +399,8 @@ export const Dialog = forwardRef(function Dialog(
         aria-modal
         data-ui="Dialog"
         id={id}
+        onActivate={onActivate}
+        onClick={handleRootClick}
         onFocus={handleFocus}
         ref={ref}
         role="dialog"
@@ -332,6 +416,7 @@ export const Dialog = forwardRef(function Dialog(
           id={id}
           onClickOutside={onClickOutside}
           onClose={onClose}
+          portal={portalProp}
           radius={cardRadius}
           ref={cardRef}
           scheme={scheme}