@sanity/ui 1.1.0-beta.2 → 1.2.0

package/package.json

@@ -1,19 +1,22 @@
 {
-  "type": "module",
   "name": "@sanity/ui",
-  "version": "1.1.0-beta.2",
+  "version": "1.2.0",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
-  "module": "./dist/index.js",
-  "main": "./dist/index.cjs",
+  "module": "./dist/index.esm.js",
+  "main": "./dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.js"
+      "require": "./dist/index.js",
+      "node": {
+        "import": "./dist/index.cjs.mjs",
+        "require": "./dist/index.js"
+      },
+      "import": "./dist/index.esm.js",
+      "default": "./dist/index.esm.js"
     },
     "./package.json": "./package.json"
   },
@@ -41,73 +44,73 @@
     "test": "jest",
     "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
     "watch": "pkg watch --strict",
-    "workshop:build": "node --loader esbuild-register/loader -r esbuild-register -r tsconfig-paths/register scripts/build",
-    "workshop:dev": "node --loader esbuild-register/loader -r esbuild-register -r tsconfig-paths/register scripts/dev",
+    "workshop:build": "node -r esbuild-register -r tsconfig-paths/register scripts/build",
+    "workshop:dev": "node -r esbuild-register -r tsconfig-paths/register scripts/dev",
     "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^1.0.1",
-    "@sanity/color": "2.2.0-alpha.1",
-    "@sanity/icons": "2.2.0-beta.1",
+    "@floating-ui/react-dom": "1.1.1",
+    "@sanity/color": "^2.2.2",
+    "@sanity/icons": "^2.2.2",
     "csstype": "^3.1.1",
-    "framer-motion": "^7.10.2",
+    "framer-motion": "^8.5.2",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@commitlint/cli": "^17.3.0",
-    "@commitlint/config-conventional": "^17.3.0",
+    "@commitlint/cli": "^17.4.2",
+    "@commitlint/config-conventional": "^17.4.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "2.0.0-beta.1",
-    "@sanity/semantic-release-preset": "^2.0.4",
-    "@sanity/ui-workshop": "^1.0.1",
-    "@testing-library/dom": "^8.19.0",
+    "@sanity/pkg-utils": "^2.2.3",
+    "@sanity/semantic-release-preset": "^4.0.0",
+    "@sanity/ui-workshop": "^1.2.0",
+    "@testing-library/dom": "^8.20.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.4",
+    "@types/jest": "^29.2.6",
     "@types/jest-axe": "^3.5.5",
-    "@types/node": "^18.11.16",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
     "@types/react-is": "^17.0.3",
     "@types/refractor": "^3.0.2",
     "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^5.46.1",
-    "commitizen": "^4.2.6",
-    "cypress": "^11.2.0",
-    "cypress-real-events": "^1.7.4",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
+    "commitizen": "^4.3.0",
+    "cypress": "^12.4.0",
+    "cypress-real-events": "^1.7.6",
     "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.16.7",
+    "esbuild": "^0.17.4",
     "esbuild-register": "^3.4.2",
-    "eslint": "^8.29.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint": "^8.32.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.31.11",
+    "eslint-plugin-react": "^7.32.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "http-server": "^14.1.1",
-    "husky": "^8.0.2",
-    "jest": "^29.3.1",
+    "husky": "^8.0.3",
+    "jest": "^29.4.0",
     "jest-axe": "^7.0.0",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest-environment-jsdom": "^29.4.0",
     "lint-staged": "^13.1.0",
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.1",
+    "prettier": "^2.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rimraf": "^3.0.2",
-    "semantic-release": "^19.0.5",
-    "start-server-and-test": "^1.15.2",
+    "rimraf": "^4.1.2",
+    "semantic-release": "^20.0.4",
+    "start-server-and-test": "^1.15.3",
     "styled-components": "^5.3.6",
-    "tsconfig-paths": "^4.1.1",
+    "tsconfig-paths": "^4.1.2",
     "typescript": "^4.9.4"
   },
   "peerDependencies": {
@@ -143,7 +146,7 @@
       "prettier --write --cache --ignore-unknown"
     ]
   },
-  "packageManager": "pnpm@7.12.2",
+  "packageManager": "pnpm@7.26.0",
   "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} />
+}