@sanity/ui 4.0.0-beta.7 → 4.0.0-next.0

package/src/components/dialog/DialogCard.tsx

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

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

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

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

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

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

@@ -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 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

@@ -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>
-  )
-}