@sanity/ui 4.0.0-static.9 → 5.0.0-alpha.1

package/src/core/components/dialog/dialogCard.tsx

@@ -1,233 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {
-  dialogCard,
-  dialogContent,
-  dialogFooter,
-  dialogHeader,
-  dialogScroller,
-  dialogScrollerShadowBottom,
-  dialogScrollerShadowTop,
-} from '@sanity/ui/css'
-import {
-  type ForwardedRef,
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react'
-
-import {focusFirstDescendant} from '../../helpers/focus'
-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 type {Props} from '../../types'
-import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
-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 = useBoundaryElement().element
-  const ref = useRef<HTMLDivElement | null>(null)
-  const contentRef = 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
-  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}
-      as={as}
-      className={dialogCard()}
-      display="flex"
-      flexDirection="column"
-      ref={ref}
-    >
-      {showHeader && (
-        <Flex align="flex-start" className={dialogHeader()} 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"
-                onClick={onClose}
-                padding={2}
-              />
-            </Box>
-          )}
-        </Flex>
-      )}
-
-      <Box className={dialogContent()} flex={1} position="relative" tabIndex={-1}>
-        {showHeader && (
-          <div
-            className={dialogScrollerShadowTop()}
-            style={{opacity: Math.min(scrollTop, 32) / 32}}
-          />
-        )}
-
-        <Box className={dialogScroller()} overflow="auto" ref={contentRef}>
-          {children}
-        </Box>
-
-        {footer && (
-          <div
-            className={dialogScrollerShadowBottom()}
-            style={{opacity: Math.min(scrollBottom, 32) / 32}}
-          />
-        )}
-      </Box>
-
-      {footer && (
-        <Box className={dialogFooter()} position="relative">
-          {footer}
-        </Box>
-      )}
-    </Card>
-  )
-}

package/src/core/components/dialog/dialogContext.ts

@@ -1,21 +0,0 @@
-import type {ResponsiveProp} from '@sanity/ui/css'
-import type {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../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/v3/dialog', {version: 0.0})

package/src/core/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.Provider value={contextValue}>{children}</DialogContext.Provider>
-}

package/src/core/components/dialog/isTargetWithinScope.ts

@@ -1,14 +0,0 @@
-import {containsOrEqualsElement} from '../../helpers/element'
-
-export function isTargetWithinScope(
-  boundaryElement: HTMLElement | null,
-  portalElement: HTMLElement | null,
-  target: Node,
-): boolean {
-  if (!boundaryElement || !portalElement) return true
-
-  return (
-    containsOrEqualsElement(boundaryElement, target) ||
-    containsOrEqualsElement(portalElement, target)
-  )
-}

package/src/core/components/dialog/types.ts

@@ -1,2 +0,0 @@
-/** @public */
-export type DialogPosition = 'absolute' | 'fixed'

package/src/core/components/dialog/useDialog.ts

@@ -1,11 +0,0 @@
-import {useContext} from 'react'
-
-import {DialogContext, type DialogContextValue} from './dialogContext'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function useDialog(): DialogContextValue {
-  return useContext(DialogContext)
-}

package/src/core/components/hotkeys/__workshop__/index.ts

@@ -1,16 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'components/hotkeys',
-  title: 'Hotkeys',
-  stories: [
-    {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./plain')),
-    },
-  ],
-}
-
-export default scope

package/src/core/components/hotkeys/__workshop__/plain.tsx

@@ -1,9 +0,0 @@
-import {Flex, Hotkeys} from '@sanity/ui'
-
-export default function PlainStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Hotkeys keys={['Ctrl', 'Shift', 'P']} />
-    </Flex>
-  )
-}

package/src/core/components/hotkeys/hotkeys.tsx

@@ -1,60 +0,0 @@
-import type {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import type {FontTextSize, Space} from '@sanity/ui/theme'
-
-import {Box} from '../../primitives/box/box'
-import {KBD} from '../../primitives/kbd/kbd'
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
-
-/** @public */
-export interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
-  fontSize?: ResponsiveProp<FontTextSize>
-  padding?: ResponsiveProp<Space>
-  keys?: string[]
-}
-
-/** @public */
-export type HotkeysElementType = 'kbd' | ComponentType
-
-/** @public */
-export type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Props<
-  HotkeysOwnProps,
-  E
->
-
-/**
- * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
- *
- * @public
- */
-export function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_ELEMENT>(
-  props: HotkeysProps<E>,
-): React.JSX.Element | undefined {
-  const {
-    as = DEFAULT_HOTKEYS_ELEMENT,
-    fontSize,
-    gap = 1,
-    gapX,
-    gapY,
-    keys,
-    padding,
-    radius,
-    ...rest
-  } = props as HotkeysProps<typeof DEFAULT_HOTKEYS_ELEMENT>
-
-  if (!keys || keys.length === 0) {
-    return undefined
-  }
-
-  return (
-    <Box as={as} data-ui="Hotkeys" {...rest} display="flex" gap={gap} gapX={gapX} gapY={gapY}>
-      {keys.map((key, i) => (
-        <KBD fontSize={fontSize} key={i} padding={padding} radius={radius}>
-          {key}
-        </KBD>
-      ))}
-    </Box>
-  )
-}

package/src/core/components/menu/__workshop__/asComponent.tsx

@@ -1,45 +0,0 @@
-import {Button, Flex, Menu, MenuButton, MenuItem, Text} from '@sanity/ui'
-import {forwardRef} from 'react'
-
-const CustomLink = forwardRef(function CustomLink(
-  props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
-  ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.JSX.Element {
-  const {children, req, ...rest} = props
-
-  return (
-    // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <a data-required={req} {...rest} href="#" ref={ref}>
-      {children}
-    </a>
-  )
-})
-
-export default function AsComponentStory(): React.JSX.Element {
-  const props = {href: '#'}
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <MenuButton
-        button={<Button text="Menu with components" />}
-        id="test"
-        menu={
-          <Menu>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="1">
-              <Text>Component 1</Text>
-            </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="2">
-              <Text>Component 2</Text>
-            </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="3">
-              <Text>Component 3</Text>
-            </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="4">
-              <Text>Component 3</Text>
-            </MenuItem>
-          </Menu>
-        }
-      />
-    </Flex>
-  )
-}

package/src/core/components/menu/__workshop__/avatarMenu.tsx

@@ -1,57 +0,0 @@
-import {UsersIcon} from '@sanity/icons'
-import {
-  Avatar,
-  Badge,
-  Box,
-  Button,
-  Flex,
-  Hotkeys,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Text,
-} from '@sanity/ui'
-
-export default function AvatarMenuStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <MenuButton
-        button={<Button icon={UsersIcon} />}
-        id="avatar-menu"
-        menu={
-          <Menu>
-            <MenuItem padding={0}>
-              <Flex align="center" padding={1}>
-                <Box flex="none">
-                  <Avatar color="purple" initials="JS" />
-                </Box>
-                <Box flex={1} padding={2}>
-                  <Text size={1}>Jane Smith</Text>
-                </Box>
-                <Box padding={1}>
-                  <Badge>Me</Badge>
-                </Box>
-                <Box padding={1}>
-                  <Hotkeys keys={['Cmd', '1']} />
-                </Box>
-              </Flex>
-            </MenuItem>
-            <MenuItem padding={0}>
-              <Flex align="center" padding={1}>
-                <Box flex="none">
-                  <Avatar color="magenta" initials="JS" />
-                </Box>
-                <Box flex={1} padding={2}>
-                  <Text size={1}>John Doe</Text>
-                </Box>
-                <Box padding={1}>
-                  <Hotkeys keys={['Cmd', '2']} />
-                </Box>
-              </Flex>
-            </MenuItem>
-          </Menu>
-        }
-      />
-    </Flex>
-  )
-}

package/src/core/components/menu/__workshop__/closableMenuButton.tsx

@@ -1,47 +0,0 @@
-import {AddIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, type MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
-import {vars} from '@sanity/ui/css'
-import {useRef} from 'react'
-
-const POPOVER_PROPS: MenuButtonProps['popover'] = {
-  constrainSize: true,
-}
-
-export default function ClosableMenuButtonStory(): React.JSX.Element {
-  const ref = useRef<HTMLButtonElement | null>(null)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack>
-        <MenuButton
-          button={<Button text="Open" />}
-          id="closable-example"
-          menu={
-            <Menu gap={0} padding={0}>
-              <Stack gap={1} padding={1}>
-                <MenuItem text="Item 1" />
-                <MenuItem text="Item 2" />
-                <MenuItem text="Item 3" />
-                <MenuItem text="Item 4" />
-              </Stack>
-              <Stack padding={1} style={{borderTop: `1px solid ${vars.color.border}`}}>
-                <Button
-                  icon={AddIcon}
-                  onClick={() => {
-                    ref.current?.click()
-                    ref.current?.focus()
-                  }}
-                  mode="bleed"
-                  text="Add item"
-                  tone="primary"
-                />
-              </Stack>
-            </Menu>
-          }
-          popover={POPOVER_PROPS}
-          ref={ref}
-        />
-      </Stack>
-    </Box>
-  )
-}

package/src/core/components/menu/__workshop__/constrainedInBoundary.tsx

@@ -1,133 +0,0 @@
-import {ErrorOutlineIcon} from '@sanity/icons'
-import {
-  BoundaryElementProvider,
-  Box,
-  Button,
-  Card,
-  Flex,
-  Menu,
-  MenuButton,
-  type MenuButtonProps,
-  MenuItem,
-  Text,
-} from '@sanity/ui'
-import type {ElementTone} from '@sanity/ui/theme'
-import {useState} from 'react'
-
-const POPOVER_PROPS: MenuButtonProps['popover'] = {
-  constrainSize: true,
-  placement: 'bottom',
-  portal: true,
-}
-
-const items: {tone: ElementTone; message: string}[] = [
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-  {
-    tone: 'critical',
-    message: 'Critical message',
-  },
-]
-
-export default function ConstrainedInBoundaryStory(): React.JSX.Element {
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-
-  return (
-    <Box height="fill" padding={[4, 5, 6]} sizing="border">
-      <Card height="fill" shadow={1}>
-        <Flex height="fill">
-          <Card flex={1} padding={4}>
-            <Text>Pane</Text>
-          </Card>
-          <Card borderLeft flex={1} padding={2} ref={setBoundaryElement}>
-            <Flex>
-              <Box flex={1} padding={3}>
-                <Text>Pane</Text>
-              </Box>
-              <Box>
-                <BoundaryElementProvider element={boundaryElement}>
-                  <MenuButton
-                    button={<Button icon={ErrorOutlineIcon} mode="bleed" tone="critical" />}
-                    id="validation-menu"
-                    menu={
-                      <Menu>
-                        {items.map((item, itemIndex) => (
-                          <MenuItem key={itemIndex} padding={5} tone={item.tone}>
-                            <Text>{item.message}</Text>
-                          </MenuItem>
-                        ))}
-                      </Menu>
-                    }
-                    popover={POPOVER_PROPS}
-                  />
-                </BoundaryElementProvider>
-              </Box>
-            </Flex>
-          </Card>
-        </Flex>
-      </Card>
-    </Box>
-  )
-}