@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -0,0 +1,233 @@
+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,5 +1,8 @@
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {Context} from 'react'
+
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {DialogPosition} from '../../types'
+import type {DialogPosition} from './types'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -7,14 +10,12 @@ import {DialogPosition} from '../../types'
  */
 export interface DialogContextValue {
   version: 0.0
-  position?: DialogPosition | DialogPosition[]
-  zOffset?: number | number[]
+  position?: ResponsiveProp<DialogPosition>
+  zOffset?: ResponsiveProp<number>
 }
 
 /**
  * @internal
  */
-export const DialogContext = createGlobalScopedContext<DialogContextValue>(
-  '@sanity/ui/context/dialog',
-  {version: 0.0},
-)
+export const DialogContext: Context<DialogContextValue> =
+  createGlobalScopedContext<DialogContextValue>('@sanity/ui/v3/dialog', {version: 0.0})

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

@@ -1,16 +1,17 @@
-import {useMemo} from 'react'
+import type {ResponsiveProp} from '@sanity/ui/css'
+import {type ReactNode, useMemo} from 'react'
 
-import {DialogPosition} from '../../types'
-import {DialogContext, DialogContextValue} from './dialogContext'
+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?: React.ReactNode
-  position?: DialogPosition | DialogPosition[]
-  zOffset?: number | number[]
+  children?: ReactNode
+  position?: ResponsiveProp<DialogPosition>
+  zOffset?: ResponsiveProp<number>
 }
 
 /**
@@ -31,5 +32,3 @@ export function DialogProvider(props: DialogProviderProps): React.JSX.Element {
 
   return <DialogContext.Provider value={contextValue}>{children}</DialogContext.Provider>
 }
-
-DialogProvider.displayName = 'DialogProvider'

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

@@ -0,0 +1,14 @@
+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/{types/dialog.ts → components/dialog/types.ts}

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

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

@@ -1,6 +1,6 @@
 import {useContext} from 'react'
 
-import {DialogContext, DialogContextValue} from './dialogContext'
+import {DialogContext, type DialogContextValue} from './dialogContext'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.

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

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

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

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

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

@@ -1,62 +1,60 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import type {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import type {FontTextSize, Space} from '@sanity/ui/theme'
 
-import {useArrayProp} from '../../hooks'
-import {Inline, KBD} from '../../primitives'
-import {Radius} from '../../types'
+import {Box} from '../../primitives/box/box'
+import {KBD} from '../../primitives/kbd/kbd'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface HotkeysProps {
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-  space?: number | number[]
+/** @public */
+export const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
+
+/** @public */
+export interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
+  fontSize?: ResponsiveProp<FontTextSize>
+  padding?: ResponsiveProp<Space>
   keys?: string[]
 }
 
-const StyledHotkeys = styled.kbd`
-  font: inherit;
-  padding: 1px;
+/** @public */
+export type HotkeysElementType = 'kbd' | ComponentType
 
-  &:not([hidden]) {
-    display: block;
-  }
-`
-
-const Key = styled(KBD)`
-  &:not([hidden]) {
-    display: block;
-  }
-`
+/** @public */
+export type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Props<
+  HotkeysOwnProps,
+  E
+>
 
 /**
  * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
  *
  * @public
  */
-export const Hotkeys = forwardRef(function Hotkeys(
-  props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
-  ref: React.Ref<HTMLElement>,
-) {
-  const {fontSize, keys, padding, radius, space: spaceProp = 0.5, ...restProps} = props
-  const space = useArrayProp(spaceProp)
+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 <></>
+    return undefined
   }
 
   return (
-    <StyledHotkeys data-ui="Hotkeys" {...restProps} ref={ref}>
-      <Inline as="span" space={space}>
-        {keys.map((key, i) => (
-          <Key fontSize={fontSize} key={i} padding={padding} radius={radius}>
-            {key}
-          </Key>
-        ))}
-      </Inline>
-    </StyledHotkeys>
+    <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>
   )
-})
-Hotkeys.displayName = 'ForwardRef(Hotkeys)'
+}

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

@@ -5,17 +5,17 @@ const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
 ): React.JSX.Element {
-  const {children, req, ...restProps} = props
+  const {children, req, ...rest} = props
 
   return (
     // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <a data-required={req} {...restProps} href="#" ref={ref}>
+    <a data-required={req} {...rest} href="#" ref={ref}>
       {children}
     </a>
   )
 })
 
-export default function AsComponentStory() {
+export default function AsComponentStory(): React.JSX.Element {
   const props = {href: '#'}
 
   return (
@@ -25,16 +25,16 @@ export default function AsComponentStory() {
         id="test"
         menu={
           <Menu>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+            <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}>
+            <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}>
+            <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}>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="4">
               <Text>Component 3</Text>
             </MenuItem>
           </Menu>

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

@@ -1,12 +1,18 @@
 import {UsersIcon} from '@sanity/icons'
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  Flex,
+  Hotkeys,
+  Menu,
+  MenuButton,
+  MenuItem,
+  Text,
+} from '@sanity/ui'
 
-import {Avatar, Badge, Box, Button, Flex, Text} from '../../../primitives'
-import {Hotkeys} from '../../hotkeys'
-import {Menu} from '../menu'
-import {MenuButton} from '../menuButton'
-import {MenuItem} from '../menuItem'
-
-export default function AvatarMenuStory() {
+export default function AvatarMenuStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
       <MenuButton

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

@@ -1,12 +1,13 @@
 import {AddIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
+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() {
+export default function ClosableMenuButtonStory(): React.JSX.Element {
   const ref = useRef<HTMLButtonElement | null>(null)
 
   return (
@@ -16,14 +17,14 @@ export default function ClosableMenuButtonStory() {
           button={<Button text="Open" />}
           id="closable-example"
           menu={
-            <Menu padding={0} space={0}>
-              <Stack padding={1} space={1}>
+            <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 var(--card-border-color)'}}>
+              <Stack padding={1} style={{borderTop: `1px solid ${vars.color.border}`}}>
                 <Button
                   icon={AddIcon}
                   onClick={() => {

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

@@ -7,21 +7,20 @@ import {
   Flex,
   Menu,
   MenuButton,
+  type MenuButtonProps,
   MenuItem,
-  SelectableTone,
   Text,
 } from '@sanity/ui'
+import type {ElementTone} from '@sanity/ui/theme'
 import {useState} from 'react'
 
-import {MenuButtonProps} from '../menuButton'
-
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
   placement: 'bottom',
   portal: true,
 }
 
-const items: {tone: SelectableTone; message: string}[] = [
+const items: {tone: ElementTone; message: string}[] = [
   {
     tone: 'critical',
     message: 'Critical message',
@@ -92,7 +91,7 @@ const items: {tone: SelectableTone; message: string}[] = [
   },
 ]
 
-export default function ConstrainedInBoundaryStory() {
+export default function ConstrainedInBoundaryStory(): React.JSX.Element {
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
   return (

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

@@ -1,13 +1,13 @@
 import {Box, Card, LayerProvider, Menu, MenuDivider, MenuItem, Stack, Text} from '@sanity/ui'
 
-export default function CustomMenuItemStory() {
+export default function CustomMenuItemStory(): React.JSX.Element {
   return (
     <Box padding={[4, 5, 6]}>
       <Card radius={3} shadow={2}>
         <LayerProvider>
           <Menu>
             <MenuItem padding={3}>
-              <Stack space={3}>
+              <Stack gap={3}>
                 <Text weight="medium" size={1}>
                   First option
                 </Text>
@@ -17,7 +17,7 @@ export default function CustomMenuItemStory() {
               </Stack>
             </MenuItem>
             <MenuItem padding={3}>
-              <Stack space={3}>
+              <Stack gap={3}>
                 <Text weight="medium" size={1}>
                   Second option
                 </Text>
@@ -28,7 +28,7 @@ export default function CustomMenuItemStory() {
             </MenuItem>
             <MenuDivider />
             <MenuItem padding={3} tone="critical">
-              <Stack space={3}>
+              <Stack gap={3}>
                 <Text weight="medium" size={1}>
                   Dangerous option
                 </Text>

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

@@ -1,18 +1,14 @@
 import {ChevronDownIcon} from '@sanity/icons'
+import {Box, Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
-import {Box, Button} from '../../../primitives'
-import {Menu} from '../menu'
-import {MenuButton} from '../menuButton'
-import {MenuItem} from '../menuItem'
-
 const selectedOptions = {
   undefined: 'undefined',
   true: true,
   false: false,
 } as const
 
-export default function CustomSelectedStateStory() {
+export default function CustomSelectedStateStory(): React.JSX.Element {
   const selected = useSelect('Selected', selectedOptions, false)
 
   return (

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

@@ -1,5 +1,5 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {Button, Flex, Menu, MenuButton, MenuButtonProps, MenuItem} from '@sanity/ui'
+import {Button, Flex, Menu, MenuButton, type MenuButtonProps, MenuItem} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
@@ -7,7 +7,7 @@ const POPOVER_PROPS: MenuButtonProps['popover'] = {
   matchReferenceWidth: true,
 }
 
-export default function DisableFocusOnCloseStory() {
+export default function DisableFocusOnCloseStory(): React.JSX.Element {
   const disableRestoreFocusOnClose = useBoolean('Disable restore focus on close', false)
 
   return (