@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/components/dialog/DialogCard.tsx

@@ -0,0 +1,233 @@
+import {CloseIcon} from '@sanity/icons'
+import {
+  dialog_card,
+  dialog_content,
+  dialog_footer,
+  dialog_header,
+  dialog_scroller,
+  dialog_scrollerShadowBottom,
+  dialog_scrollerShadowTop,
+} from '@sanity/ui-css'
+import {
+  type ForwardedRef,
+  type ReactNode,
+  use,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+
+import {focusFirstDescendant} from '../../core/helpers/focus'
+import type {Props} from '../../core/types'
+import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
+import {useGlobalKeyDown} from '../../hooks/useGlobalKeyDown'
+import {Box} from '../../primitives/box/Box'
+import {Button} from '../../primitives/button/Button'
+import {Card, type CardElementType, type CardOwnProps} from '../../primitives/card/Card'
+import {Flex} from '../../primitives/flex/Flex'
+import {useLayer} from '../../primitives/layer/useLayer'
+import {Text} from '../../primitives/text/Text'
+import {BoundaryElementContext} from '../../utils/boundaryElement/BoundaryElementContext'
+import {usePortal} from '../../utils/portal/usePortal'
+import {isTargetWithinScope} from './isTargetWithinScope'
+
+/** @internal */
+export const DEFAULT_DIALOG_CARD_ELEMENT = 'div'
+
+/** @internal */
+export type DialogCardOwnProps = CardOwnProps & {
+  /**
+   * @beta
+   */
+  __unstable_autoFocus: boolean
+  /**
+   * @beta
+   */
+  __unstable_hideCloseButton: boolean
+  children: ReactNode
+  contentRef?: ForwardedRef<HTMLDivElement>
+  footer: ReactNode
+  header: ReactNode
+  id: string
+  onClickOutside?: () => void
+  onClose?: () => void
+  portal?: string
+}
+
+/** @internal */
+export type DialogCardElementType = CardElementType
+
+/** @internal */
+export type DialogCardProps<E extends DialogCardElementType = DialogCardElementType> = Props<
+  DialogCardOwnProps,
+  E
+>
+
+/** @internal */
+
+export function DialogCard<E extends DialogCardElementType = typeof DEFAULT_DIALOG_CARD_ELEMENT>(
+  props: DialogCardProps<E>,
+): React.JSX.Element {
+  const {
+    __unstable_autoFocus: autoFocus,
+    __unstable_hideCloseButton: hideCloseButton,
+    as = DEFAULT_DIALOG_CARD_ELEMENT,
+    children,
+    contentRef: forwardedContentRef,
+    footer,
+    header,
+    id,
+    onClickOutside,
+    onClose,
+    portal: portalProp,
+    ref: forwardedRef,
+    ...rest
+  } = props as DialogCardProps<typeof DEFAULT_DIALOG_CARD_ELEMENT>
+
+  const portal = usePortal()
+  const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
+  const boundaryElement = use(BoundaryElementContext)
+  const ref = useRef<HTMLDivElement | null>(null)
+  const contentRef = useRef<HTMLDivElement | null>(null)
+  const {isTopLayer} = useLayer()
+  const labelId = `${id}_label`
+  const showCloseButton = Boolean(onClose) && hideCloseButton === false
+  const showHeader = Boolean(header) || showCloseButton
+  const [scrollTop, setScrollTop] = useState(0)
+  const [scrollHeight, setScrollHeight] = useState(0)
+  const scrollBottom = scrollHeight - scrollTop
+
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
+    forwardedContentRef,
+    () => contentRef.current,
+  )
+
+  useEffect(() => {
+    if (!autoFocus) return
+
+    // On mount: focus the first focusable element
+    if (ref.current) {
+      focusFirstDescendant(ref.current)
+    }
+  }, [autoFocus, ref])
+
+  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],
+    ),
+  )
+
+  useClickOutsideEvent(
+    isTopLayer &&
+      onClickOutside &&
+      ((event) => {
+        const target = event.target as Node | null
+
+        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
+          // Ignore clicks outside of the scope
+          return
+        }
+
+        onClickOutside()
+      }),
+    () => [ref.current],
+  )
+
+  useEffect(() => {
+    const el = contentRef.current
+
+    if (!el) return
+
+    const handleScroll = () => {
+      setScrollTop(el.scrollTop)
+      setScrollHeight(el.scrollHeight - el.offsetHeight)
+    }
+
+    el.addEventListener('scroll', handleScroll, {passive: true})
+
+    return () => {
+      el.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  return (
+    <Card
+      {...rest}
+      ref={ref}
+      as={as}
+      className={dialog_card()}
+      display="flex"
+      flexDirection="column"
+    >
+      {showHeader && (
+        <Flex align="flex-start" className={dialog_header()} padding={3} position="relative">
+          <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"
+                padding={2}
+                onClick={onClose}
+              />
+            </Box>
+          )}
+        </Flex>
+      )}
+
+      <Box className={dialog_content()} flex={1} position="relative" tabIndex={-1}>
+        {showHeader && (
+          <div
+            className={dialog_scrollerShadowTop()}
+            style={{opacity: Math.min(scrollTop, 32) / 32, zIndex: 1}}
+          />
+        )}
+
+        <Box ref={contentRef} className={dialog_scroller()} overflow="auto" tabIndex={-1}>
+          {children}
+        </Box>
+
+        {footer && (
+          <div
+            className={dialog_scrollerShadowBottom()}
+            style={{opacity: Math.min(scrollBottom, 32) / 32}}
+          />
+        )}
+      </Box>
+
+      {footer && (
+        <Box className={dialog_footer()} position="relative">
+          {footer}
+        </Box>
+      )}
+    </Card>
+  )
+}

package/src/components/dialog/DialogContext.ts

@@ -0,0 +1,21 @@
+import type {ResponsiveProp} from '@sanity/ui-css'
+import type {Context} from 'react'
+
+import {createGlobalScopedContext} from '../../core/lib/createGlobalScopedContext'
+import type {DialogPosition} from './types'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface DialogContextValue {
+  version: 0.0
+  position?: ResponsiveProp<DialogPosition>
+  zOffset?: ResponsiveProp<number>
+}
+
+/**
+ * @internal
+ */
+export const DialogContext: Context<DialogContextValue> =
+  createGlobalScopedContext<DialogContextValue>('@sanity/ui/v4/dialog', {version: 0.0})

package/src/components/dialog/DialogProvider.tsx

@@ -0,0 +1,34 @@
+import type {ResponsiveProp} from '@sanity/ui-css'
+import {type ReactNode, useMemo} from 'react'
+
+import {DialogContext, type DialogContextValue} from './DialogContext'
+import type {DialogPosition} from './types'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface DialogProviderProps {
+  children?: ReactNode
+  position?: ResponsiveProp<DialogPosition>
+  zOffset?: ResponsiveProp<number>
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function DialogProvider(props: DialogProviderProps): React.JSX.Element {
+  const {children, position, zOffset} = props
+
+  const contextValue: DialogContextValue = useMemo(
+    () => ({
+      version: 0.0,
+      position,
+      zOffset,
+    }),
+    [position, zOffset],
+  )
+
+  return <DialogContext value={contextValue}>{children}</DialogContext>
+}

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

@@ -0,0 +1,141 @@
+import {
+  Button,
+  Dialog,
+  Flex,
+  Layer,
+  LayerProvider,
+  Menu,
+  MenuButton,
+  MenuItem,
+  Stack,
+  Text,
+} from '@sanity/ui'
+import {useState} from 'react'
+
+export default function LayeringFocusStory(): React.JSX.Element {
+  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
+            id="open-dialog-1-button"
+            text="Open dialog 1"
+            onClick={() => setFirstDialogOpen(true)}
+          />
+
+          {firstDialogOpen && (
+            <Dialog
+              header="Dialog 1"
+              id="1"
+              onActivate={({activeElement}) => activeElement?.focus()}
+              onClose={() => setFirstDialogOpen(false)}
+            >
+              <Stack gap={2} padding={3}>
+                <Button
+                  id="open-dialog-2-button-1"
+                  mode="ghost"
+                  text="Open dialog 2"
+                  onClick={() => setSecondDialogOpen(true)}
+                />
+                <Button
+                  id="open-dialog-2-button-2"
+                  mode="ghost"
+                  text="Open dialog 2"
+                  onClick={() => setSecondDialogOpen(true)}
+                />
+                <Button
+                  id="open-dialog-2-button-3"
+                  mode="ghost"
+                  text="Open dialog 2"
+                  onClick={() => setSecondDialogOpen(true)}
+                />
+              </Stack>
+
+              {secondDialogOpen && (
+                <Dialog
+                  header="Dialog 2"
+                  id="2"
+                  onActivate={({activeElement}) => activeElement?.focus()}
+                  onClose={() => setSecondDialogOpen(false)}
+                >
+                  <Stack gap={2} padding={3}>
+                    <Button
+                      id="open-dialog-3-button-1"
+                      mode="ghost"
+                      text="Open dialog 3"
+                      onClick={() => setThirdDialogOpen(true)}
+                    />
+                    <Button
+                      id="open-dialog-3-button-2"
+                      mode="ghost"
+                      text="Open dialog 3"
+                      onClick={() => setThirdDialogOpen(true)}
+                    />
+                    <Button
+                      id="open-dialog-3-button-3"
+                      mode="ghost"
+                      text="Open dialog 3"
+                      onClick={() => setThirdDialogOpen(true)}
+                    />
+                  </Stack>
+
+                  {thirdDialogOpen && (
+                    <Dialog
+                      header="Dialog 3"
+                      id="3"
+                      onActivate={({activeElement}) => activeElement?.focus()}
+                      onClose={() => setThirdDialogOpen(false)}
+                    >
+                      <Stack gap={2} padding={3}>
+                        <MenuButton
+                          button={
+                            <Button id="open-dialog-4-menu-button" mode="ghost" text="Open menu" />
+                          }
+                          id="menu"
+                          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 gap={2} padding={3}>
+                            <Text>👋</Text>
+                          </Stack>
+                        </Dialog>
+                      )}
+                    </Dialog>
+                  )}
+                </Dialog>
+              )}
+            </Dialog>
+          )}
+        </Layer>
+      </Flex>
+    </LayerProvider>
+  )
+}

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

@@ -0,0 +1,29 @@
+import {Box, Button, Dialog, Text} from '@sanity/ui'
+import {useAction, useBoolean} from '@sanity/ui-workshop'
+
+export default function AutoFocusStory(): React.JSX.Element {
+  const autoFocus = useBoolean('Auto-focus', true)
+  const open = useBoolean('Open', false)
+  const handleClose = useAction('onClose')
+
+  if (!open) {
+    return (
+      <Box padding={4}>
+        <Text muted>Use knobs to open the dialog</Text>
+      </Box>
+    )
+  }
+
+  return (
+    <Dialog
+      __unstable_autoFocus={autoFocus}
+      header="Auto-focus example"
+      id="auto-focus-example"
+      onClose={handleClose}
+    >
+      <Box padding={4}>
+        <Button text="Focusable button" />
+      </Box>
+    </Dialog>
+  )
+}

package/src/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(): React.JSX.Element {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <LayerProvider>
+        <Layer id="a" zOffset={10}>
+          <Card padding={2} shadow={2}>
+            <DebugLayer />
+          </Card>
+        </Layer>
+        <Layer id="b" zOffset={10}>
+          <Card padding={2} shadow={2}>
+            <DebugLayer />
+          </Card>
+        </Layer>
+        <Dialog
+          header="Layering example"
+          id="layering-example"
+          zOffset={100}
+          onClose={useAction('onEscape')}
+        >
+          <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/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 header="Dialog 1" id="dialog1" shadow={1}>
+          <Box padding={4}>
+            <Button ref={dialog2Button} text="Open Dialog 2" onClick={() => setOpen2(true)} />
+          </Box>
+
+          {open2 && (
+            <Dialog
+              animate
+              header="Dialog 2"
+              id="dialog2"
+              shadow={2}
+              onClickOutside={() => setOpen2(false)}
+              onClose={() => setOpen2(false)}
+            >
+              <Box padding={4}>
+                <Button ref={dialog3Button} text="Open Dialog 3" onClick={() => setOpen3(true)} />
+              </Box>
+
+              {open3 && (
+                <Dialog
+                  animate
+                  header="Dialog 3"
+                  id="dialog3"
+                  shadow={4}
+                  onClickOutside={() => setOpen3(false)}
+                  onClose={() => setOpen3(false)}
+                >
+                  <Box padding={4}>
+                    <MenuButton
+                      button={<Button text="Test" />}
+                      id="menu3"
+                      menu={
+                        <Menu>
+                          <MenuItem text="Test" />
+                          <MenuItem text="Test" />
+                        </Menu>
+                      }
+                      popover={{animate: true, portal: true}}
+                    />
+                  </Box>
+                </Dialog>
+              )}
+            </Dialog>
+          )}
+        </Dialog>
+      )}
+    </LayerProvider>
+  )
+}

package/src/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>
+  )
+}