@sanity/ui 2.10.0-corel.0 → 3.0.0-static.1

package/src/core/components/autocomplete/autocomplete.tsx

@@ -1,4 +1,6 @@
 import {ChevronDownIcon} from '@sanity/icons'
+import {ResponsiveProp} from '@sanity/ui/css'
+import {FontTextSize, Space} from '@sanity/ui/theme'
 import {
   ChangeEvent,
   ElementType,
@@ -32,8 +34,8 @@ import {
   Text,
   TextInput,
 } from '../../primitives'
+import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
 import {Radius} from '../../types'
-import {AnimatedSpinnerIcon, ListBox, Root} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
@@ -50,7 +52,7 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   border?: boolean
   customValidity?: string
   filterOption?: (query: string, option: Option) => boolean
-  fontSize?: number | number[]
+  fontSize?: ResponsiveProp<FontTextSize>
   icon?: ElementType | ReactNode
   id: string
   /** @beta */
@@ -65,7 +67,8 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   openOnFocus?: boolean
   /** The options to render. */
   options?: Option[]
-  padding?: number | number[]
+  padding?: ResponsiveProp<Space>
+  // padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
     Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
   prefix?: ReactNode
@@ -466,11 +469,16 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         if (v === 1) return 1
         if (v === 2) return 1
 
-        return v - 2
+        return (v as Space) - 2
       }),
     [padding],
   )
-  const openButtonPadding = useMemo(() => padding.map((v) => Math.max(v - 1, 0)), [padding])
+
+  const openButtonPadding = useMemo(
+    () => padding.map((v) => Math.max((v as Space) - 1, 0)),
+    [padding],
+  )
+
   const openButtonProps: AutocompleteOpenButtonProps = useMemo(
     () => (typeof openButton === 'object' ? openButton : EMPTY_RECORD),
     [openButton],
@@ -576,7 +584,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     if (filteredOptions.length === 0) return null
 
     return (
-      <ListBox
+      <Box
         data-ui="AutoComplete__results"
         onKeyDown={handleListBoxKeyDown}
         padding={1}
@@ -613,7 +621,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
             )
           })}
         </Stack>
-      </ListBox>
+      </Box>
     )
   }, [
     activeValue,
@@ -678,7 +686,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   ])
 
   return (
-    <Root
+    <div
       data-ui="Autocomplete"
       onBlur={handleRootBlur}
       onFocus={handleRootFocus}
@@ -687,7 +695,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     >
       {input}
       {results}
-    </Root>
+    </div>
   )
 })
 

package/src/core/components/breadcrumbs/__workshop__/example.tsx

@@ -19,15 +19,13 @@ export default function Example() {
   return (
     <Flex align="center" height="fill" justify="center">
       <Breadcrumbs
-        gapX={1}
-        gapY={3}
         maxLength={maxLength}
         separator={
           <Text muted size={1}>
             /
           </Text>
         }
-        // space={2}
+        space={2}
       >
         <Text size={1}>
           <a href="#">Root</a>

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

@@ -10,10 +10,5 @@ export default defineScope({
       title: 'Example',
       component: lazy(() => import('./example')),
     },
-    {
-      name: 'buttons',
-      title: 'Buttons',
-      component: lazy(() => import('./buttons')),
-    },
   ],
 })

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -1,16 +1,14 @@
+import {breadcrumbs, composeClassNames, GapStyleProps} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {Children, forwardRef, isValidElement, useCallback, useMemo, useRef, useState} from 'react'
 import {useClickOutsideEvent} from '../../hooks'
 import {Box, Button, ButtonProps, Flex, Popover, Stack, Text} from '../../primitives'
-import {Root} from './breadcrumbs.styles'
 
 /**
  * @beta
  */
-export interface BreadcrumbsProps {
+export interface BreadcrumbsProps extends GapStyleProps {
   expandButton?: Omit<ButtonProps, 'onClick' | 'selected'>
-  gap?: number | number[]
-  gapX?: number | number[]
-  gapY?: number | number[]
   maxLength?: number
   separator?: React.ReactNode
   /** @deprecated - Use `gap`, `gapX`, `gapY` instead */
@@ -26,11 +24,12 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
 ) {
   const {
     children,
+    className,
     expandButton: expandButtonProps,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     gap: _gapProp,
-    gapX = props.gap ?? props.space ?? 2,
-    gapY = props.gap ?? props.space ?? 2,
+    gapX = props.gap ?? (props.space as Space | undefined) ?? 2,
+    gapY = props.gap ?? (props.space as Space | undefined) ?? 2,
     maxLength,
     separator,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -91,7 +90,12 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   const len = items.length
 
   return (
-    <Root data-ui="Breadcrumbs" {...restProps} ref={ref}>
+    <nav
+      data-ui="Breadcrumbs"
+      {...restProps}
+      className={composeClassNames(className, breadcrumbs())}
+      ref={ref}
+    >
       <Flex align="flex-start" as="ol" gapX={gapX} gapY={gapY} wrap="wrap">
         {items.map((item, itemIndex) => (
           <Flex align="flex-start" as="li" gapX={gapX} gapY={gapY} key={itemIndex}>
@@ -100,7 +104,8 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
           </Flex>
         ))}
       </Flex>
-    </Root>
+    </nav>
   )
 })
+
 Breadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'

package/src/core/components/dialog/__workshop__/props.tsx

@@ -4,6 +4,7 @@ import {useCallback, useRef, useState} from 'react'
 import {WORKSHOP_WIDTH_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PropsStory() {
+  const animate = useBoolean('Animate', false, 'Props')
   const header = useText('Header', 'Props example', 'Props')
   const onClickOutside = useBoolean('Close when click outside', false, 'Props') || false
   const hideCloseButton = useBoolean('Hide close button', false, 'Props') || false
@@ -29,6 +30,7 @@ export default function PropsStory() {
         {open && (
           <Dialog
             __unstable_hideCloseButton={hideCloseButton}
+            animate={animate}
             header={header}
             id="dialog"
             onClickOutside={onClickOutside ? handleClose : undefined}

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

@@ -1,7 +1,18 @@
 import {CloseIcon} from '@sanity/icons'
+import {
+  composeClassNames,
+  ContainerStyleProps,
+  dialog,
+  dialogCardRoot,
+  dialogContainer,
+  dialogContent,
+  dialogFooter,
+  dialogHeader,
+  dialogLayout,
+  PaddingStyleProps,
+} from '@sanity/ui/css'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
 import {
   containsOrEqualsElement,
   focusFirstDescendant,
@@ -15,24 +26,15 @@ import {
   usePrefersReducedMotion,
 } from '../../hooks'
 import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
-import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
-import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
 import {useTheme_v2} from '../../theme'
 import {DialogPosition, Radius} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
-import {
-  animationDialogStyle,
-  AnimationDialogStyleProps,
-  dialogStyle,
-  responsiveDialogPositionStyle,
-  ResponsiveDialogPositionStyleProps,
-} from './styles'
 import {useDialog} from './useDialog'
 
 /**
  * @public
  */
-export interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {
+export interface DialogProps extends PaddingStyleProps, ContainerStyleProps {
   /**
    * @beta
    */
@@ -41,6 +43,13 @@ export interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProp
    * @beta
    */
   __unstable_hideCloseButton?: boolean
+  /**
+   * Whether the dialog should animate in on mount.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
   cardRadius?: Radius | Radius[]
   cardShadow?: number | number[]
   contentRef?: React.ForwardedRef<HTMLDivElement>
@@ -55,16 +64,9 @@ export interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProp
   position?: DialogPosition | DialogPosition[]
   scheme?: ThemeColorSchemeKey
   zOffset?: number | number[]
-  /**
-   * Whether the dialog should animate in on mount.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
 }
 
-interface DialogCardProps extends ResponsiveWidthProps {
+interface DialogCardProps extends ContainerStyleProps {
   /**
    * @beta
    */
@@ -99,55 +101,6 @@ function isTargetWithinScope(
   )
 }
 
-const Root = styled(Layer)<
-  ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps & AnimationDialogStyleProps
->(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle)
-
-const DialogContainer = styled(Container)`
-  &:not([hidden]) {
-    display: flex;
-  }
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`
-
-const DialogCardRoot = styled(Card)`
-  &:not([hidden]) {
-    display: flex;
-  }
-  width: 100%;
-  min-height: 0;
-  max-height: 100%;
-  overflow: hidden;
-  overflow: clip;
-`
-
-const DialogLayout = styled(Flex)`
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-`
-
-const DialogHeader = styled(Box)`
-  position: relative;
-  z-index: 2;
-`
-
-const DialogContent = styled(Box)`
-  position: relative;
-  z-index: 1;
-  overflow: auto;
-  outline: none;
-`
-
-const DialogFooter = styled(Box)`
-  position: relative;
-  z-index: 3;
-`
-
 const DialogCard = forwardRef(function DialogCard(
   props: DialogCardProps,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
@@ -236,11 +189,26 @@ const DialogCard = forwardRef(function DialogCard(
   )
 
   return (
-    <DialogContainer data-ui="DialogCard" width={width}>
-      <DialogCardRoot radius={radius} ref={ref} scheme={scheme} shadow={shadow}>
-        <DialogLayout direction="column">
+    <Container
+      align="center"
+      className={dialogContainer()}
+      data-ui="DialogCard"
+      direction="column"
+      display="flex"
+      justify="center"
+      width={width}
+    >
+      <Card
+        className={dialogCardRoot()}
+        display="flex"
+        radius={radius}
+        ref={ref}
+        scheme={scheme}
+        shadow={shadow}
+      >
+        <Flex className={dialogLayout()} direction="column" flex={1}>
           {showHeader && (
-            <DialogHeader>
+            <Box className={dialogHeader()} position="relative">
               <Flex align="flex-start" padding={3}>
                 <Box flex={1} padding={2}>
                   {header && (
@@ -262,17 +230,26 @@ const DialogCard = forwardRef(function DialogCard(
                   </Box>
                 )}
               </Flex>
-            </DialogHeader>
+            </Box>
           )}
-
-          <DialogContent flex={1} ref={contentRef} tabIndex={-1}>
+          <Box
+            className={dialogContent()}
+            flex={1}
+            overflow="auto"
+            position="relative"
+            ref={contentRef}
+            tabIndex={-1}
+          >
             {children}
-          </DialogContent>
-
-          {footer && <DialogFooter>{footer}</DialogFooter>}
-        </DialogLayout>
-      </DialogCardRoot>
-    </DialogContainer>
+          </Box>
+          {footer && (
+            <Box className={dialogFooter()} position="relative">
+              {footer}
+            </Box>
+          )}
+        </Flex>
+      </Card>
+    </Container>
   )
 })
 
@@ -284,10 +261,11 @@ DialogCard.displayName = 'ForwardRef(DialogCard)'
  * @public
  */
 export const Dialog = forwardRef(function Dialog(
-  props: DialogProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'id' | 'width'>,
+  props: DialogProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'id' | 'rows' | 'width' | 'wrap'>,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const dialog = useDialog()
+  const context = useDialog()
   const {layer} = useTheme_v2()
   const {
     __unstable_autoFocus: autoFocus = true,
@@ -295,6 +273,7 @@ export const Dialog = forwardRef(function Dialog(
     cardRadius: cardRadiusProp = 4,
     cardShadow = 3,
     children,
+    className,
     contentRef,
     footer,
     header,
@@ -303,12 +282,12 @@ export const Dialog = forwardRef(function Dialog(
     onClickOutside,
     onClose,
     onFocus,
-    padding: paddingProp = 3,
+    padding = 3,
     portal: portalProp,
-    position: positionProp = dialog.position || 'fixed',
+    position: positionProp = context.position || 'fixed',
     scheme,
     width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
+    zOffset: zOffsetProp = context.zOffset || layer.dialog.zOffset,
     animate: _animate = false,
     ...restProps
   } = props
@@ -318,7 +297,6 @@ export const Dialog = forwardRef(function Dialog(
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
   const boundaryElement = useBoundaryElement().element
   const cardRadius = useArrayProp(cardRadiusProp)
-  const padding = useArrayProp(paddingProp)
   const position = useArrayProp(positionProp)
   const width = useArrayProp(widthProp)
   const zOffset = useArrayProp(zOffsetProp)
@@ -386,18 +364,20 @@ export const Dialog = forwardRef(function Dialog(
 
   return (
     <Portal __unstable_name={portalProp}>
-      <Root
+      <Layer
         {...restProps}
-        $animate={animate}
-        $padding={padding}
-        $position={position}
         aria-labelledby={labelId}
         aria-modal
+        className={composeClassNames(className, dialog())}
+        data-animate={animate ? '' : undefined}
         data-ui="Dialog"
+        display="flex"
         id={id}
         onActivate={onActivate}
         onClick={handleRootClick}
         onFocus={handleFocus}
+        padding={padding}
+        position={position}
         ref={ref}
         role="dialog"
         zOffset={zOffset}
@@ -422,8 +402,9 @@ export const Dialog = forwardRef(function Dialog(
           {children}
         </DialogCard>
         <div ref={postDivRef} tabIndex={0} />
-      </Root>
+      </Layer>
     </Portal>
   )
 })
+
 Dialog.displayName = 'ForwardRef(Dialog)'

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

@@ -1,43 +1,31 @@
+import {RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import {FontTextSize, Space} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {Inline, KBD} from '../../primitives'
-import {Radius} from '../../types'
+import {Box, Inline, KBD} from '../../primitives'
 
 /**
  * @public
  */
-export interface HotkeysProps {
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-  space?: number | number[]
+export interface HotkeysProps extends RadiusStyleProps {
+  fontSize?: ResponsiveProp<FontTextSize>
+  padding?: ResponsiveProp<Space>
+  space?: ResponsiveProp<Space>
   keys?: string[]
 }
 
-const Root = styled.kbd`
-  font: inherit;
-  padding: 1px;
-
-  &:not([hidden]) {
-    display: block;
-  }
-`
-
-const Key = styled(KBD)`
-  &:not([hidden]) {
-    display: block;
-  }
-`
-
 /**
  * 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>,
+  props: HotkeysProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'display' | 'height' | 'ref' | 'rows' | 'size' | 'width' | 'wrap'
+    >,
+  ref: React.Ref<HTMLDivElement>,
 ) {
   const {fontSize, keys, padding, radius, space: spaceProp = 0.5, ...restProps} = props
   const space = useArrayProp(spaceProp)
@@ -47,15 +35,16 @@ export const Hotkeys = forwardRef(function Hotkeys(
   }
 
   return (
-    <Root data-ui="Hotkeys" {...restProps} ref={ref}>
+    <Box as="kbd" data-ui="Hotkeys" {...restProps} display="flex" gap={spaceProp} ref={ref}>
       <Inline as="span" space={space}>
         {keys.map((key, i) => (
-          <Key fontSize={fontSize} key={i} padding={padding} radius={radius}>
+          <KBD display="block" fontSize={fontSize} key={i} padding={padding} radius={radius}>
             {key}
-          </Key>
+          </KBD>
         ))}
       </Inline>
-    </Root>
+    </Box>
   )
 })
+
 Hotkeys.displayName = 'ForwardRef(Hotkeys)'

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

@@ -1,8 +1,8 @@
+import {PaddingStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
-import {styled} from 'styled-components'
 import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
 import {Box, Stack} from '../../primitives'
-import {ResponsivePaddingProps} from '../../primitives/types'
 import {useLayer} from '../../utils'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenuController} from './useMenuController'
@@ -10,7 +10,7 @@ import {useMenuController} from './useMenuController'
 /**
  * @public
  */
-export interface MenuProps extends ResponsivePaddingProps {
+export interface MenuProps extends PaddingStyleProps {
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
@@ -26,21 +26,20 @@ export interface MenuProps extends ResponsivePaddingProps {
   originElement?: HTMLElement | null
   registerElement?: (el: HTMLElement) => () => void
   shouldFocus?: 'first' | 'last' | null
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
 }
 
-const Root = styled(Box)`
-  outline: none;
-  overflow: auto;
-`
-
 /**
  * The `Menu` component is a building block for application menus.
  *
  * @public
  */
 export const Menu = forwardRef(function Menu(
-  props: MenuProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex'>,
+  props: MenuProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'role' | 'rows' | 'tabIndex' | 'width' | 'wrap'
+    >,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -155,17 +154,19 @@ export const Menu = forwardRef(function Menu(
 
   return (
     <MenuContext.Provider value={value}>
-      <Root
+      <Box
         data-ui="Menu"
         {...restProps}
         onKeyDown={handleKeyDown}
+        overflow="auto"
+        outline="none"
         padding={padding}
         ref={handleRefChange}
         role="menu"
         tabIndex={-1}
       >
         <Stack space={space}>{children}</Stack>
-      </Root>
+      </Box>
     </MenuContext.Provider>
   )
 })

package/src/core/components/menu/menuDivider.tsx

@@ -0,0 +1,16 @@
+import {composeClassNames, menuDivider} from '@sanity/ui/css'
+import {forwardRef, HTMLProps} from 'react'
+
+/**
+ * @public
+ */
+export const MenuDivider = forwardRef(function MenuDivider(
+  props: HTMLProps<HTMLHRElement>,
+  ref: React.ForwardedRef<HTMLHRElement>,
+) {
+  const {className, ...restProps} = props
+
+  return <hr {...restProps} className={composeClassNames(className, menuDivider())} ref={ref} />
+})
+
+MenuDivider.displayName = 'MenuDivider'